Webdesign 101 » Navigation » Dynamiske menuer

DHTML-menueksempler: Flyout

Et antal artikler om dynamiske menuer

Simpel menu
Hierarkisk menu
Navigationsbjælke
Flyout-menu
Harmonikamenu

Denne menu er rent konstruktionsmæssigt meget lig den simple dropdown-menu, vi udviklede på websiden Dropdown menu. Det kan du konstatere ved at klikke én gang for at åbne menuen og én gang til for at lukke den igen.

Ideen er her at lægge den udløsende funktion i en knap, der er positioneret som en slags faneblad i venstre side af skærmen. Foruden at vise og skjule tekststykket med links vil et klik på knappen også flytte denne.

Stylesheet

Det stylesheet, der placerer såvel fanebladet som tekstykket med links, ser ud som følger:

	#tab {
		position:absolute;
		left:0px;
		top:75px;
	}
	#tabtext {
		position:absolute;
		left:0px;
		top:80px;
		height:150px;
		width:150px;
		background-color:white;
		visibility:hidden;
		padding-left:10px;
		padding-top:5px;
	}

Bemærk her, at der er justeret lidt på højden af laget tabtext i forhold til størrelsen af den grafik, der bestemmer størrelsen af laget tab.Det er fordi, knappen er en smule større end det synlige røde.

Laget tabtext er forsynet med en baggrundsfarve, da det ellers ville være transparent. Så ville man ikke tydeligt kunne læse teksten i laget. Endelig er laget forsynet med en padding for at få lidt luft omkring teksten i laget.

JavaScript funktionen

Igen lægger vi funktionskaldet på den synlige knap:

<a href="javascript:visMenu()">
<img src="flyoutbutton.gif" alt="" width="25" 
height="158" border="0"></a>

Fundamentalt er det den samme funktion, som vi havde på foregående side, men det er andre egenskaber, vi skal manipulere med:

var menuShow=0 //Menuen er usynlig
function visMenu() {
	if (menuShow == 1) {
		flytTil('tab',0,75)
		skjulObjekt('tabtext')
		menuShow = 0;
		return;
	}
	if (menuShow == 0) {
		flytTil('tab',150,75)
		visObjekt('tabtext')
		menuShow = 1;
	}
}

Igen bruger vi en global variabel, her menuShow, til at holde styr på, om menuen er åben eller lukket. Hvis menuen er åben, sker der det, at laget tab, der rummer knappen, flyttes til den vandrette position 0, og laget tabtext skjules. Hvis menuen er lukket, sker der det, at laget tabflyttes til den vandrette position 150px og laget tabtext gøres synligt.

Også her benytter jeg et par universalfunktioner, der er indeholdet i dhtmlapi.js, for at slippe for at skrive en mængde kodelinier, der skal tage hensyn til, at browserne tolker elementegenskaberne forskelligt. Du kan læse mere om denne sag på websiden DHTML modulbibliotek.