Hvordan lage en skjult Meny med Javascript

October 3

Javascript Den lar deg vise og skjule menyelementer dynamisk når en bruker utfører en handling som å klikke på en knapp. Javascript "style" egenskapen gir deg muligheten til å skjule en meny. Bruk skjulte menyer for å skjule og vise navigasjonslenker i websidene. Legg ved menyen kode i en div container ved å omgi den med "div" tags. Påfør "synlighet" CSS stil for å skjule og vise menyelementene.

Bruksanvisning

1 Høyreklikk på HTML-filen du vil redigere, og velg "Åpne med." Klikk på HTML-editor av ditt valg i listen over programmer som faller ned. Hvis du ikke har et redigeringsprogram installert, klikk på "Notisblokk", som følger med Windows.

2 Legg en div tag som inneholder menyelementene. Skriv inn følgende kode i begynnelsen av menyelementene:

Legg til følgende kode på slutten av menyen:

</ Div>

Åpning og lukking div koder inneholde menyelementene, slik at du kan bruke div for å skjule menyinnholdet.

3 Legg til følgende kode i div tag du opprettet i trinn to:

style = "visibility: hidden"

Koden ovenfor skjuler hele menyen. Hvis du plasserer denne koden i bare en del av menyen, bare en del av menyen er skjult.

4 Legg til følgende kode i HTML-filen:

funksjon hideshow () {

if (document.getElementById ( "meny"). style.visibility = "skjult") {

document.getElementById ( "menyen"). style.visibility = "synlig"}

else {

document.getElementById ( "menyen"). style.visibility = "skjult"

}

</ Script>

Javascript-funksjonen skjuler menyen hvis det er synlig og viser menyen hvis det er skjult.

5 Koble den nye Javascript-funksjonen til en knapp. Knappen viser eller skjuler menyen, avhengig av menyen nåværende tilstand. Legg til følgende kode til side:

6 Lagre endringene og åpne filen i nettleseren. Menyen er skjult som standard. Klikk på knappen for å vise menyen. Klikk på knappen igjen for å skjule menyen.

Hint

Du må laste opp koden endringer i Web vert å fremme endringer i live server.