Mankeren in menu met hover stijl

[schilder]

Hallo

Ik ben bezig met deze site http://kovhetsprookjeshof.nl/indexx.php hij is in opbouw dit is een test pagina.

Graag wil ik weten of er een mogelijkheid is om in de menu's de style op hover te krijgen als je op desbetreffende pagina bent. Zodat je ziet op welke pagina je bent alvast dank voor reacties.

Ger

[nirwana]

Ger,

Gebruik je nu ook PHP-code om de pagina op te bouwen ?

Als je bijvoorbeeld de inhoud van het menu met PHP-code opbouwt dan kun je bekijken voor welke pagina het menu op dat moment wordt opgebouwd en die waarde vergelijken met waar elk menu-item naar verwijst. Als daar een match uit komt, dan kun je dat menu-item die hover-kleur meegeven (bijvoorbeeld via een klasse (selected ?) op de li).

[schilder]

Ger,

Gebruik je nu ook PHP-code om de pagina op te bouwen ?

Als je bijvoorbeeld de inhoud van het menu met PHP-code opbouwt dan kun je bekijken voor welke pagina het menu op dat moment wordt opgebouwd en die waarde vergelijken met waar elk menu-item naar verwijst. Als daar een match uit komt, dan kun je dat menu-item die hover-kleur meegeven (bijvoorbeeld via een klasse (selected ?) op de li).

dank voor je antwoord:

Ik gebruik de php voor include ook de menu's maar deze zijn met <ul> <li> opgebouwd samen met css, ik lees de menu met php include in zodat ze makkelijk in een cms werken.

Verder ben ik niet zo thuis in php, ik had gehoopt dat er een instelling zou zijn of een bestaand script dat dan de a. naar a.hover veranderd.

Ger

[nirwana]

Ger,

Iemand zal toch moeten aangeven op welke pagina je je op dat moment bevindt. Er zal dus een vergelijk gemaakt moeten worden tussen de huidige pagina en de items in het menu.

Aangezien je PHP gebruikt had ik gehoopt dat de menu's en de menu-items zich in een database zouden bevinden. Dan kun je namelijk eenvoudig zo'n vergelijk maken en kun je het betreffende item een andere kleur geven.

Als je dit niet met PHP doet, dan zul je het met Javascript moeten doen:
- je vraagt de naam van de huidige pagina op
- je loopt door alle li-items van het menu en vergelijkt alle a-href's met de huidige pagina
- als je de juiste link gevonden hebt dan markeer je die met een klasse waardoor die een andere opmaak krijgt

[nirwana]

Ger,

Om je een idee te geven van de Javascript-manier ben ik daar eens mee gaan stoeien op www.mozbrowser.nl/web/sprookjeshof/indexx.html

De voornaamste toevoeging aan deze code zit in deze regel:

Code: Selecteer alles

<script type="text/javascript" src="menu.js"></script>

bovenin het bestand. Dit verwijst namelijk naar een Javascript-bestand dat ik voor het menu heb gemaakt: http://www.mozbrowser.nl/web/sprookjeshof/menu.js

Doordat ik dat script aan de pagina toevoeg registreert het zich om te laden bij openen van de webpagina. Daardoor wordt de functie findMenuItem() in dat bestand aangeroepen. Die functie vraagt in dit voorbeeld alle linkjes met de klasse menu op. Om het mezelf een beetje makkelijker te maken heb ik enkele menu-items met een menu-klasse aangeduid:

Code: Selecteer alles

<li><a href="indexx.html" class="menu">Activiteiten</a></li>

Op zich hoef je dat niet te doen, maar in dit geval maakt dat het script wat eenvoudiger. Het eigenlijke script ziet er als volgt uit:

Code: Selecteer alles

function findMenuItem()
{
	var currentPage = location.href;
	var bgColor = '#99ff99';
	var arMenuLinks = getElementsByClassName(document, 'a', 'menu');
	for (i=0; i<arMenuLinks.length; i++)
	{
		var link = arMenuLinks[i];
		if (link.href == currentPage)
		{
			link.style.backgroundColor = bgColor;			
			break;
		}
	}
	ShowObject('megamenu', 0);
	return false;
}

Deze code doet het volgende:
- opvragen hoe de huidige pagina heet
- de gewenste achtergrondkleur opgeven
- een lijst opvragen van de links met als klasse menu op de pagina
- als de href van de link overeenkomt met de naam van de webpagina dan wordt aan de link de achtergrondkleur toegekend
- als de link gevonden is dan stap ik met de break-instructie uit de lus (we zijn klaar)

Vervolgens laat ik nog voor de zekerheid het menu weer verbergen en heb ik nog maar een return false op het eind meegegeven. Misschien overbodig, maar het geeft uiteindelijk wel het gewenste resultaat.

Als test heb ik 2 menu-items die aan de criteria (href="indexx.html" en class="menu") voldoen. Echter wordt nu alleen de eerste groen-gekleurd. Dat komt dus doordat we stoppen zodra we een link hebben gevonden die aan de voorwaarden voldoet.

[schilder]

Ger,

Om je een idee te geven van de Javascript-manier ben ik daar eens mee gaan stoeien op http://www.mozbrowser.nl/web/sprookjeshof/indexx.html

Mijn dank ik ga hiermee aan de slag

Ger

[schilder]

Ger,

Om je een idee te geven van de Javascript-manier ben ik daar eens mee gaan stoeien op http://www.mozbrowser.nl/web/sprookjeshof/indexx.html

Mijn dank ik ga hiermee aan de slag

Ger

Ik ben er mee aan het stoeien geweest het lukt mij niet

Zie de pagina's nu http://hetsprookjeshof.nl/overons/Pedag ... eid%20.php


Eigenlijk wil ik het Hover effect alleen op het menu dat zichtbaar is links op de perkamentrol. (Dus niet in het balkmenu boven)

Ter informatie alle menu's staan op aparte html files en worden op iedere pagina met inculde ingelezen dit zodat ze in het cms gewijzigd kunnen worden en op alle pagina'dan wijzigen

vriendelijke groet
Ger