wp_nav_menu one page design menu highlights

Bedankt voor je reactie. Helaas krijg ik het nog steeds niet werkende. En ik ben toch vrij veel javaschript oplossingen tegen gekomen met de door jouw gesuggereerde zoek opdracht (en daar ook redelijk veel van geprobeerd)

In een ander forum kreeg ik deze twee sites als tip (ook oplossingen met javascript)

http://trevordavis.net/blog/jquery-one-page-navigation-plugin
http://www.richnetapps.com/automatically_highlight_current_page_in/

Maar die kreeg ik ook niet werkende.

Ik heb alle oplossingen letterlijk over genomen (alleen de namen van de id’s en de classes aangepast) maar het lijkt wel of de scripts genegeerd worden.

Ik ben zo langzamerhand het spoor behoorlijk bijster. Voor mijn gevoel heb ik het halve internet met oplossingen al geprobeerd

Ik heb er even een en ander over uitgezocht op google, wat jquery.noconflict() inhoud, en geprobeerd te doen zoals je zei, maar het werkt nog steeds niet helaas.

Onderstaande de code van de eerste link die ik gepost had, aangepast met noconflict.

<script src="js/jquery.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>

<script type="text/javascript" language="javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {$j('#menu-hoofdmenu').onePageNav();});
</script>

Dit zou moeten werken lijkt me. Sterker nog, ik heb even een test gemaakt (test.html) los van wordpress om te zien o het script werk, en dat was wel het geval. Ik heb hiervoor het menu exact over genomen als dat van wordpress, en dezelfde opmaak en style gebruikt. Dit werkte dus wel (lokaal op mijn pc). Het enigste verschil was nu dat ik geen wordpress gebruik. Dit doet mij denken dat het probleem met wordpress zelf te maken heeft.

Kan het zijn dat het aan de url output van wordpress ligt?. De url output in wordpress is <url>/#home. De url output van mijn snelle test is <url>/test.html#home.

Als dat het is dan zit het probleem denk ik in jquery.nav.js

In de code hierboven heb ik overigens de eerste $ en de tweede $ vervangen met $j. Ik heb ook geprobeerd door de tweede $ niet aan te passen. Maar dit maakte dus ook geen verschil.

Hm. Ik heb denk ik wat te vroeg gejuich. Bovenstaande werkt wel, maar niet optimaal. De code in jquery.nav.js conflicteerde met enkele andere plugins op de website (die werken niet meer) en deed de website het ook niet meer in ie7 (onder het mom: als je toch compatibiliteit wilt).

Ik vermoed dat ik iets simpelers nodig heb, want ik hoef geen scroll functie te hebben, alleen de class change.

Terug naar het web dus maar.

Bedankt. Daar was ik inderdaad ook al achter, zo laadde ik het script ook in. Alleen gaf het script vervolgens dus problemen helaas.

Ik heb nu het volgende script gevonden dat op het eerste gezicht lijkt te werken:

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 = "hidemenu";
				arr[i].parentNode.className = "hidemenu";
			}
		}
	}
}

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();
}

Dit doet wat het moet doen, echter, alleen als ik de pagina refresh. Dus ik klik op een menu-item (bv contact) dan doet hij niks, maar wel als ik daarna refresh dus (omdat #contact dan in de url staat).

Nu kan ik mijn bezoekers wel elke keer op F5 laten drukken, maar ik heb twijfels bij de gebruiksvriendelijkheid hier van.

Ik denk dat het komt door de windows.onload functie, want als ik die weg haal dan werkt het helemaal niet.

Welk hele verhaal? Als ik ergens niet duidelijk ben geweest moet je het maar zeggen hoor.

Het script werkt dus wel, zoals ik zei. Maar alleen bij een refresh van de pagina. Ik moet een onclick functie oid hebben, denk ik. Maar ik heb helemaal geen verstand van JS, dus hoe ik dat moet gaan toepassen is momenteel nog even abacadabra.

Dat verhaal van de tabs. Moet je die ook als tabs gebruiken zoals in het voorbeeld van de website? Want dat zou betekenen dat ik mijn hele website moet restylen, en dat is dan weer niet de kant die ik op wil :).

Edit
Hier is trouwens een link naar de website: http://www.3dinyourhands.com/wp_new/ mocht dit helpen bij het oplossen.

Ik gebruik nu dus het bovenstaande script, maar dat werkt pas als je op een menu item klikt en de browser refreshed.

Volgens mij posten we net door elkaar heen. Had mijn vorige post net ge-edit met de link naar mijn website om (hopelijk) het verhaal wat duidelijker te maken.