wp_nav_menu one page design menu highlights

Huh? Hebben we het hier nog over hetzelfde?
De website werkt prima, het highlighten van het laatst geklikte menu-item niet, op windows onder zowel IE, FF en Opera. Nouja, tenzij ik een refresh doe dus.

Hey bedankt, dat werkt. Tenminste, als ik e.preventDefault();er tussen weg haal. Anders kan ik wel op een item klikken, en dan highlight hij ook, maar dan gaat hij niet naar een andere pagina. Zonder dat werkt het echter wel.

Waar staan

e.preventDefault();
e.stopPropagation();

voor?

Het enigste wat ik nu nog moet uitzoeken is dat als je op “nieuws” klikt (menu in footer) en dan weer op een item in het menu, dat het menu item niet actief word. Waarschijnlijk omdat “nieuws” een externe pagina is, en de rest van de site dus opnieuw inlaad. Mss dat ik dat wel met een onload event kan oplossen?

Hm. Deze code:

function extractPageName(hrefString)
{
	var arr = hrefString.split('/');
	return  (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
	for (var i=0; i < arr.length; i++)
	{
		if(extractPageName(arr[i].href) == crtPage)
		{
			if (arr[i].parentNode.tagName != "DIV")
			{
				arr[i].className = "actief";
				arr[i].parentNode.className = "actief";
			}
		}
	}
}

function setPage()
{
	hrefString = document.location.href ? document.location.href : document.location;

	if (document.getElementById("menu-hoofdmenu") !=null )
	setActiveMenu(document.getElementById("menu-hoofdmenu").getElementsByTagName("a"), extractPageName(hrefString));
}

window.onload=function()
{
	setPage();
}

Werkt zoals het moet (ook met reloaden van de pagina als je van “nieuws” klikt op 1 van de items in het hoofdmenu), maar werkt dus alleen als de pagina refreshed.

Deze code:

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('ul#menu-hoofdmenu li a').click(
    function(e) {
        e.stopPropagation();
        $j(this).closest('ul').find('.actief').removeClass('actief');
        $j(this).parent().addClass('actief');
    });
});

Doet wat het moet doen, maar werkt dan weer niet als de pagina herlaadt (wat dus gebeurd als je van “nieuws” switched naar een andere pagina).

Het werkt wel als ik deze twee scripts samen gebruik, maar het zorgt wel voor een hele boel code. Is er een manier om dat op te schonen? Zo niet dan is deze oplossing beter dan geen oplossing.

Volgens mij heb ik een foutje gemaakt bij het meegeven van de class aan “home”. Ik heb nu gewoon via wordpress menu manager “home” een custom class mee gegeven en nu werkt het wel.

In principe werkt de code ook wel, het probleem doet zich echter voor zodra ik op het item “nieuws” klik (in het footer menu). De nieuws sectie bevind zich extern van de “one page” en laad de site dus opnieuw in. Gevolg is dat “home” weer op actief word gezet, maar bij “nieuws” zou geen van de hoofd-menu items actief moeten zijn.

Een volgend probleem doet zich voor als je dan van “nieuws” op 1 van de items in het hoofd-menu klikt. Bijvoorbeeld portfolio. Als je dat doet word de pagina opnieuw ingeladen en word de knop “portfolio” niet actief. Wel word “home” dan weer actief gemaakt (de pagina word immers opnieuw geladen).

Dit is met alleen jouw stukje code. Als ik dan het andere stuk code er ook bij gebruik dan word “portfolio” wel actief, omdat dat script (na verversen) volgens mij kijkt naar de overeenkomst in de attribuut en de url. Probleem van de eeuwige actieve “home” knop blijft dan overigens ook bestaan.