Webdesign 101 » Navigation » Dynamiske menuer

Navigationsbjælke

Stylesheet, JavaScript og HTML-kode vedrørende menuen på denne side kan nu downloades som en zip-fil ved navn navbar.zip.

Hvis vi afstår fra et benytte <a>-markørens indbyggede hover-effekt, bliver HTML-delen af hver knap noget mere kompliceret:

	<div id="menu1_1" class="knap" 
	onmouseover="mover('menu1_1',true)" 
	onmouseout="mover('menu1_1',false)"
	onclick="visUnderMenu('submenu1')">
	Introduktion</div>

Hver knap skal tilføjes følgende elementer:

Funktionen mover('id',true) er lidt interessant:

	function mover(objekt,onoff){
	var blok = findObjekt(objekt);
	if (onoff)
		setBgColor(objekt, "red")
	else
		setBgColor(objekt, "#900")
	}

Hvis vi passerer en id og den boolske værdi true udføres én ting, passeres den samme id med en boolske værdi false, udføres en anden ting.

Undermenuerne er bygget op på næsten samme måde som hovedmenuen:

	<div class="uknap" id="smenu1_1"
	onmouseover="smover('smenu1_1',true)"
	onmouseout="smover('smenu1_1',false)"
	onclick="location.href='blank3.php'">
	Introduktion</div>

Vi har her en ny class, da vi ønsker et lidt andet udseende på undermenuens knapper. Vi har også et andet sæt id'er og funktionen mover() er blevet til smover(), da vi også ønsker en lidt anderledes mouseovereffekt. Og endelig skal et klik på en knap i undermenuen udløse et link, og ikke et funktion. Her kan vi ikke bruge <a href="...>, men må ty til at lave et JavaScript link.

Positionering

Du kan let komme ud for at få noget bøvl med positionering af en sådan menu, lidt afhængigt af, hvilke elementer, der i øvrigt er på siden, og hvilke positionsønsker, du har.

Hele menuen er indeholdt i kassen #menubox. Det er let nok at positionere denne absolut i forhold til websiden som helhed. position:absolute; left:10px; top:0px; vil f.eks. placere menuen i overkanten af browservinduet, 10 pixel fra venstre kant. Ønsker du imidlertid f.eks. at centrere menuen, som jeg har gjort på denne side, kan du let løbe ind i nogle vanskeligheder.

Der er forskellige løsninger på problemet. Den, jeg har her har valgt, er en dynamisk centrering ved hjælp af noget JavaScript. Det sker onload, således:

<body onload="centrerH('menubox')>

Men det kan jo kun lade sig gøre, når man har adgnag til en "centrer vandret"-funktion. Der har jeg lavet mig sådan én:

Disse funktioner er sammen med en del andre forklaret i sektionen om udvikling af et DHTML JavaScript modulbibliotek.

Senest opdateret: 20. juni 2002