Hvordan lage Javascript-baserte menyer å programmere med HTML

September 15  by Eliza

Konseptet med en Javascript-baserte menyen er grei. Når du holder musepekeren over en meny, åpnes det noe undermenyen og lar deg velge ett av alternativene på undermenyen, hvis ønskelig. Bevege musen til en annen meny lukker den første undermenyen og åpner en annen.

Hvordan å designe HTML for menyen

Dette eksempel er basert på tungt formaterte lister. Det er mange andre måter å lage menyer, men denne tilnærmingen fungerer ganske bra. Teoretisk sett kan du enkelt lagre menyene på disken eller i en database og bruke Javascript for å konstruere den nødvendige kodelisten for deg. Men for nå, konsentrere seg om det faktum at dette menysystemet er statisk og gir konkrete alternativer som vist i følgende kode:

<Ul id = "meny">
<Li id = "Art.1">
<A href = "http://www.somewhere.com"
onmouseover = "CloseMenu ()"> Home </a>
</ Li>
<Li id = "item2">
<A href = "http://www.somewhere.com"
onmouseover = "OpenMenu ('Item2Submenu')"> Arrangementer </a>
<Ul id = "Item2Submenu"
onmouseover = "KeepSubmenu ()"
onmouseout = "CloseMenu ()">
<a href="http://www.somewhere.com"> Hendelse 1 </a>
<a href="http://www.somewhere.com"> Hendelse 2 </a>
<a href="http://www.somewhere.com"> Hendelse 3 </a>
</ Ul>
</ Li>
<Li id = "Item3">
<A href = "http://www.somewhere.com"
onmouseover = "OpenMenu ('Item3Submenu')">
Kontakt oss
</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"> E-post </a>
</ Ul>
</ Li>
</ Ul>

Det er tre hovedmenyalternativer: Hjem, Events, og Kontakt oss. Home-menyen mangler undermenyer. Hendelser Menyen har en undermeny som består av Hendelse 1, Hendelse 2, og Event 3. Kontakt-menyen gir Telefon, Mail og e-post som undermenyer.

Hvordan lage Javascript-baserte menyer å programmere med HTML

Definere menystiler

Listene som du opprettet wonâ € ™ t se mye som en meny i utgangspunktet. Hemmeligheten er formateringen gitt av CSS som følger:

<Style type = "text / css">
#menu
{
margin: 0;
padding: 0;
}
#menu li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li en
{
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 80px;
bakgrunn: black;
farge: hvit;
text-align: center;
}
#menu li a: hover
{
bakgrunn: grønn;
}
#menu ul
{
position: absolute;
synlighet: skjult;
margin: 0;
padding: 0;
bakgrunn: grå;
border: 1px solid hvitt;
}
#menu ul en
{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 80px;
text-align: left;
bakgrunn: lightgrey;
color: black;
}
#menu ul a: hover
{
bakgrunn: # 7f7fff;
}
</ Style>

Denne CSS-kode er vist i størrelsesorden detalj. Den #menu formatering er for den øverste <ul id = "meny"> tag. Viktigste punktene er formatering i sin tur av #menu li og #menu li et stiler. Når en bruker svever musen over et element på hovedmenyen, den #menu li a: endrer hover stil bakgrunnsfargen til grønt.

Undermenyen formatering oppnås ved de #menu ul og #menu ul et stiler. Igjen, når brukeren svever musen over en undermeny, den #menu ul en: definerer hover stil en fargeendring for det menyvalget.

Hvordan du oppretter Javascript-funksjoner

Javascript-funksjoner må utføre fire oppgaver. Den første oppgaven er å spore status for menysystemet og sørge for at menyen fortsatt stabil. Følgende kode utfører den oppgaven:

// Holder gjeldende åpne menyvalget.
Var Element;
// Holder timeout verdi.
Var Timer;
// Skjul menyen etter å ha klikket utenfor det.
document.onclick = CloseMenu;

Item variabelen inneholder nåværende menyvalget. Timeren har en verdi som bestemmer når en undermeny lukkes automatisk. Hvis du dona € ™ t gi denne verdien, menyen oppfører seg ganske uberegnelig, og brukerne kan finne det vanskelig å velge elementer. Til slutt må koden være et middel for å automatisk lukke menyelementer når en bruker klikker utenfor menysystemet, som er hva document.onclick = CloseMenu oppdrag gjør.

Den andre oppgaven er å tilveiebringe en anordning for å åpne undermenyer, som er skjult i utgangspunktet. Å gjøre undermenyen synlig gir tilgang til oppføringene den gir. Følgende kode viser en teknikk for å åpne undermenyer:

funksjon OpenMenu (Meny)
{
// Hvis det er et element som er åpen, lukker du den.
if (Element)
{
Item.style.visibility = "skjult";
}

// Skaff et element referanse for den nye menyen.
Element = document.getElementById (Meny);

// Gjør det synlig.
Item.style.visibility = "synlig";
}

Legg merke til at koden sjekker først for å sikre at den tidligere undermenyen er faktisk lukket. Ellers kan brukeren se to åpne undermenyer, som ville definitivt være forvirrende. Etter koden gjør den forrige undermeny skjult, det gjør den gjeldende undermeny synlig. I begge tilfeller, avhengig eksempelet på sikten egenskapen til å utføre oppgaven.

Den tredje oppgave er å tilveiebringe en fremgangsmåte for lukking av en meny. Denne spesielle funksjonen er litt vanskelig fordi du dona € ™ t nødvendigvis ønsker menyen for å lukke umiddelbart. Ellers wonâ brukeren € ™ t har tid til å velge en undermeny element før det stenger. Følgende kode viser hvordan du utfører denne oppgaven med en tidsforsinkelse på plass:

fungere CloseMenu ()
{
// Sett en timer for å lukke menyen.
Tidsur = window.setTimeout (PerformClose, 500);
}
funksjons PerformClose ()
{
// Hvis elementet er fortsatt åpen.
if (Element)
{
// Lukk det.
Item.style.visibility = "skjult";
}
}

Når søknaden ber om at en undermeny nær, skaper koden en 500 millisekund forsinkelse, hvoretter vindu kaller automatisk PerformClose (). Når et element eksisterer, PerformClose () setter sin synlighet eiendom til skjult for å skjule undermenyen fra visningen.

Det er tre måter som en undermeny kan lukke. En undermeny kan lukkes når en bruker velger en annen hovedmenyelement, når brukeren flytter musepekeren ut av undermenyen, eller når brukeren klikker på en hoved eller undermenyelement. Når en bruker svever musen over en undermeny, må koden holde undermenyen åpen. Thatâ € ™ s fjerde oppgaven søknaden må utføre:

fungere KeepSubmenu ()
{
// Tilbakestill timeren.
window.clearTimeout (Timer);
}

Så lenge brukeren svever musen over undermenyen, vil det fortsatt være åpen fordi timeren er stadig tilbakestilt. I det øyeblikket brukeren beveger musen av undermenyen eller klikker på en av de undermenyelementer, tidtakeren starter på nytt, og undermenyen lukkes.