Solsystemet
Webdesign 101 » Navigation » Dynamiske menuer

Simpel dropdown-menu

Klik én gang på knappen til venstre for at vise menuen, klik en gang til for at skjule den.

Dette og de følgende eksperimenter med dynamiske menuer er alle (med undtagelse af "Flyout"-menuen) baseret på menuknapper, der er lavet med CSS, som beskrevet på websiden Menuknapper med CSS. Det stylesheet, der laver disse knapper, ser således ud:

a.knap {
	background-color: #900;
	color:#fff;
	display: block;
	font: normal bold 12px arial, helvetica, sans-serif;
	text-align: left;
	text-decoration: none;
	margin-bottom:1px;
	border:2px outset #d00;
	padding: 2px 12px 2px 12px;
	width:130px;
	height:22px;
}
html>body .knap {
	width:102px;
	height:14px;
}
a.knap:hover {
	background-color: #cc0000;
	color: #fff;
	text-decoration: none;
	border-style: inset;
}

#menu1 {
	visibility:hidden;
}

Menuen

Klik én gang på knappen "Solsystemet", og menuen foldes ud. Klik én gang til, og den foldes sammen igen. Koden til selve menuen, som du ser den på websiden, ser således ud:

<div id="topmenu1">
<a class="knap" href="javascript:visMenu('menu1');">Solsystemet</a>
<div id="menu1">
	<div><a class="knap" href="blank0.php">Introduktion</a></div>
	<div><a class="knap" href="blank0.php">Indre planeter</a></div>
	<div><a class="knap" href="blank0.php">Asteroiderne</a></div>
	<div><a class="knap" href="blank0.php">Ydre planeter</a></div>
	<div><a class="knap" href="blank0.php">Kometskyen</a></div>
</div>
</div>

Bemærk, at hele menuen, både "trigger"-knappen og selve menuen er indeholdt i en boks med ID topmenu1. Menuen, med ID menu1, er skjult med visibility-attributten. Det har den praktiske betydning, at den plads, menuen optager i udfoldet stand, ikke kan indeholde andre elementer, hvis menuen ligger i samme lag som disse elementer. Her er dette undgået ved at positionere menuen absolut på siden og give den en højere z-index værdi end sidens øvrige elementer:

#topmenu1{
	position:absolute;
	top:160px;
	left:20px;
	z-index:1;

En anden mulighed, som er interessant, hvis du vil bruge relativ positionering, er at bruge display-attributten i stedet for visibility-attributen. Demosiden Brug af display-attributten viser et eksempel på dette.

Scriptet

Du kan se af koden herover, at et klik på knappen "Solsystemet" udløser et funktionskald til funktionen visMenu(), og at vi passerer argumentet (eller parameteren) menu1 til denne funktion. Denne funktion ser således ud:

menu1synlig=0 //menuen er skjult

function visMenu(objekt){
	if (menu1synlig==1){
		skjulObjekt(objekt);
		menu1synlig=0;
		return;
	}
	if (menu1synlig==0){
		visObjekt(objekt);
		menu1synlig=1;
	}
}

Forklaring til funktionen

Om menuen er synlig eller ikke holder vi styr på med den variable menu1synlig. Hvis den er 0 (false), er menuen usynlig, hvis den er 1 (true), er menuen synlig. På denne måde kan vi opnå den dobbelte klik-funktion på den kanp, der viser og skjuler menuen:

Når funktionen visMenu() kaldes, undersøges det først, om menuen er synlig. Er den det, betyder funktionskaldet, at den skal lukkes. Når det er sket, sættes den variable tilbage til normaltilstanden og funktionen afbrydes med return. Der sker ikke mere.

Hvis menuen derimod ikke er synlig, når funktionen kaldes, er den første betingelse ikke opfyldt, og derfor er det funktionens anden del, der udføres, nemlig at menuen åbnes og den variable menu1synlig sættes til værdien 1.

Senest opdateret: 20. juni 2002