Webdesign 101 » Navigation » Dynamiske menuer

Dropdownmenu med undermenuer

Hver undermenu er indlagt i et lag for sig efter modellen:

<div id="submenu1">
	<div><a class="uknap"
	href="blank.php">Introduktion</a></div>
	<div><a class="uknap" 
	href="blank.php">Om foreningen</a></div>
	<div><a class="uknap" 
	href="blank.php">Om astronomien</a></div>
</div>

Stylesheet'et for a.uknap er præcis mage til stylesheet'et for a.knap (se stylesheet-koden på foregående side), men her er vi nødt til at manipulere med undermenuens position, så den vises lidt tilhøjre for og neden for det menupunkt, der aktiverer undermenuen. Det sker ved at sætte en margin-top og en margin-left på hver submenu, i forhold til laget #topmenu1

IE's markering af aktivt link

Ved at formatere <a>-markøren undgår vi problemer med mouseover både på linkteksten og knappens bagrund. Til gengæld har vi i Internet Explorer det problem, at et aktivt link markeres med en stiplet eller prikket linie rundt om det aktive område, det vil sige linkteksten og dennes baggrund. Det er tydeligt at se, hvis du klikker på de første 3 knapper i menuen, mens denne effekt er fjernet fra de nederste 3 knapper.

Ønsker du at fjerne denne effekt, skal hvert link forsynes med en stump javascript - jf. følgende eksempel:

<div>
	<a class="knap" onfocus="this.blur()" 
	href="javascript:visSubmenu('submenu5',true)">
	Kometskyen</a>
</div>

Event'en onFocus udløses af en markering, det vil sige et klik. I det øjeblik, der klikkes, udløser event'en onFocus blur()-egenskaben på det aktuelle link. Dette fjerne fokus fra det aktuelle link. Derved forsvinder den stiplede linie, uden at det går ud over linkets egentlige funktion, nemlig at udløse funktionen visSubmenu().

Senest opdateret: 20. juni 2002