Begrebet et JavaScript-baseret menu er ligetil. Når du holder musen hen over en menu, åbnes nogen undermenu og lader dig vælge en af mulighederne i undermenuen, hvis det ønskes. Flytning af musen til en anden menu lukker første undermenu og åbner en anden.
Hvordan til at designe HTML for menuen
Dette eksempel er baseret på stærkt formaterede lister. Der er mange andre måder at skabe menuer, men denne fremgangsmåde fungerer ganske godt. Teoretisk set kunne man nemt gemme menuerne på disk eller i en database og bruge JavaScript til at konstruere den ønskede liste koden for dig. Men for nu, koncentrere sig om det faktum, at dette menusystem er statisk og giver specifikke indstillinger som vist i følgende kode:
<Ul id = "menu">
<Li id = "Konto1">
<A href = "http://www.somewhere.com"
onmouseover = "CloseMenu ()"> Hjem </a>
</ Li>
<Li id = "Konto2">
<A href = "http://www.somewhere.com"
onmouseover = "OpenMenu (Item2Submenu ')"> Arrangementer </a>
<Ul id = "Item2Submenu"
onmouseover = "KeepSubmenu ()"
onmouseout = "CloseMenu ()">
<a href="http://www.somewhere.com"> Begivenhed 1 </a>
<a href="http://www.somewhere.com"> Begivenhed 2 </a>
<a href="http://www.somewhere.com"> Begivenhed 3 </a>
</ Ul>
</ Li>
<Li id = "item3">
<A href = "http://www.somewhere.com"
onmouseover = "OpenMenu (Item3Submenu ')">
Kontakt os
</a>
<Ul id = "Item3Submenu"
onmouseover = "KeepSubmenu ()"
onmouseout = "CloseMenu ()">
<a href="http://www.somewhere.com"> Telefon </a>
<a href="http://www.somewhere.com"> Mail </a>
<a href="http://www.somewhere.com"> Email </a>
</ Ul>
</ Li>
</ Ul>
Der er tre menupunkter: Forside, Events, og kontakt os. Startmenuen mangler undermenuer. Den Events Menuen har en undermenu, der består af Begivenhed 1, Event 2, og Event 3. Kontaktudvalget menu indeholder telefon, post og e-mail som undermenuer.
Definer menu stilarter
Listerne, du har oprettet wonâ € t ser meget gerne en menu i begyndelsen. Den hemmelige formateringen billede af CSS som følger:
<Style type = "text / css">
#menu
{
margin: 0;
padding: 0;
}
#menu li
{
margin: 0;
padding: 0;
liste-style: none;
flyde: til venstre;
}
#menu li a
{
display: block;
margin: 0 1px 0 0;
padding: 4PX 10px;
bredde: 80px;
baggrund: sort;
farve: hvid;
tekst-align: center;
}
#menu li a: hover
{
baggrund: grøn;
}
#menu ul
{
holdning: absolut;
synlighed: skjult;
margin: 0;
padding: 0;
baggrund: grå;
kant: 1px solid hvid;
}
#menu ul en
{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
bredde: 80px;
tekst-align: left;
baggrund: lysegrå;
farve: sort;
}
#menu ul a: hover
{
baggrund: # 7f7fff;
}
</ Style>
Denne CSS kode præsenteres i den rækkefølge detaljer. Formatering Den #menu er for det øverste <ul id = "menu"> tag. De vigtigste menupunkter formatering på skift af de #menu li og #menu li a stilarter. Når en bruger svæver musen over en vigtigste menupunkt, #menu li a: hover stil skifter baggrundsfarven til grøn.
Formatering Undermenuen opnås ved de #menu ul og #menu ul en stilarter. Igen, når brugeren svæver musen over en undermenu vare på #menu ul a: hover stil definerer en farveændring for at menupunkt.
Sådan opretter JavaScript-funktionerne
JavaScript funktioner har til at udføre fire opgaver. Den første opgave er at spore status for menusystemet og sikre, at menuen forbliver stabil. Følgende kode udfører denne opgave:
// Holder den aktuelle åbne menupunkt.
var Vare;
// Indeholder timeout værdi.
Var Timer;
// Skjul menuen efter at have klikket udenfor.
document.onclick = CloseMenu;
Den Item variabel indeholder aktuelle menupunkt. Timer besidder en værdi, der bestemmer, hvornår en undermenu lukker automatisk. Hvis du donâ € t give denne værdi, menuen opfører helt uregelmæssigt, og brugerne kan finde det vanskeligt at vælge elementer. Endelig skal koden give et middel til automatisk at lukke menupunkter når en bruger klikker uden for menusystemet, hvilket er, hvad document.onclick = CloseMenu opgave gør.
Den anden opgave er at give et middel til at åbne undermenuer, som er skjult fra starten. Gøre undermenuen synlig giver adgang til posterne det giver. Følgende kode viser en teknik til at åbne undermenuer:
funktion OpenMenu (Menu)
{
// Hvis der er et element, der er åben, lukkes den.
hvis (Item)
{
Item.style.visibility = "hidden";
}
// Få et element reference for den nye menu.
Item = document.getElementById (Menu);
// Gør det synligt.
Item.style.visibility = "synlige";
}
Bemærk, at koden kontrollerer først at sikre, at den tidligere undermenu faktisk er lukket. Ellers kan brugeren se to åbne undermenuer, som definitivt ville være forvirrende. Efter koden gør foregående undermenuen skjult, det gør den aktuelle undermenu synlige. I begge tilfælde eksempel afhængig af synlighed egenskaben til at udføre opgaven.
Den tredje opgave er at tilvejebringe en fremgangsmåde til lukning af en menu. Dette særlige træk er lidt vanskelig, fordi du don € t nødvendigvis ønsker menuen for at lukke med det samme. Ellers wonâ brugeren € t har tid til at vælge en undermenu element, inden den lukker. Følgende kode viser, hvordan du udfører denne opgave med en tidsforsinkelse på plads:
fungere CloseMenu ()
{
// Indstil en timer til at lukke menuen.
Timer = window.setTimeout (PerformClose, 500);
}
funktion PerformClose ()
{
// Hvis elementet er stadig åben.
hvis (Item)
{
// Luk det.
Item.style.visibility = "hidden";
}
}
Dersom ansøgningen anmoder om, at en undermenu tæt, koden skaber en 500 millisekund forsinkelse, hvorefter vinduet kalder automatisk PerformClose (). Når et element findes, PerformClose () indstiller sin synlighed ejendom til skjult at skjule undermenuen fra visningen.
Der er tre måder, hvorpå en undermenu kan lukke. En undermenu kan lukke, når en bruger vælger en anden vigtigste menupunkt, når brugeren flytter musemarkøren væk fra undermenuen, eller når brugeren klikker på en hoved- eller undermenuen element. Når en bruger svæver musen over et punkt på undermenuen, skal koden holde undermenuen åben. Thatâ € s den fjerde opgave ansøgningen skal udføre:
fungere KeepSubmenu ()
{
// Nulstille timeren.
window.clearTimeout (Timer);
}
Så længe brugeren svæver musen over undermenuen, vil den forblive åben, fordi timeren er konstant nulstilles. I det øjeblik brugeren bevæger musen væk fra undermenuen eller klikker på en af de undermenupunkter, timeren genstartes, og undermenuen lukker.