Come fare un menu nascosto con JavaScript

September 16

Il linguaggio JavaScript permette di mostrare e voci di menu nascondere dinamicamente quando un utente esegue un'azione come clic su un pulsante. Il codice JavaScript "stile" di proprietà ti dà la possibilità di nascondere un menu. Utilizzare i menu nascosti per nascondere e visualizzare i collegamenti di navigazione nelle pagine Web. Racchiudere il codice del menu all'interno di un contenitore div circondandolo con tag "div". Applicare la proprietà "visibilità" di stile CSS per nascondere e mostrare le voci del menu.

istruzione

1 Fare clic destro sul file HTML che si desidera modificare e selezionare "Apri con". Clicca l'editor HTML di vostra scelta nella lista dei programmi che scende verso il basso. Se non si dispone di un editor installato, fai clic su "Blocco note", che è incluso in Windows.

2 Aggiungere un tag div che contiene le voci di menu. Digitare il seguente codice all'inizio delle voci di menu:

<Div id = "menu">

Aggiungere il seguente codice al fine del menu:

</ Div>

L'apertura e chiusura tag div contengono le voci di menu, in modo da poter usare il div per nascondere il contenuto del menu.

3 Aggiungere il seguente codice al tag div creato nel passaggio due:

style = "visibility: hidden"

Il codice di cui sopra nasconde l'intero menu. Se si inserisce il codice solo in una parte del menu, solo una parte del menu è nascosta.

4 Aggiungere il seguente codice nel file HTML:

<Script type = "text / javascript">

Funzione NascondiMostra () {

if (document.getElementById ( "menu"). style.visibility = "hidden") {

document.getElementById ( "menu"). style.visibility = "visible"}

altro {

document.getElementById ( "menu"). style.visibility = "hidden"

}

}

</ Script>

La funzione JavaScript nasconde il menu se è visibile e mostra il menu se è nascosta.

5 Collegare la nuova funzione JavaScript a un pulsante. Il pulsante mostra o nasconde il menu, a seconda dello stato corrente del menu. Aggiungere il seguente codice alla pagina:

<Input type = "button" onclick = "NascondiMostra ()" value = "Mostra o nascondi Menu">

6 Salvare le modifiche e aprire il file nel browser Web. Il menu è nascosta per impostazione predefinita. Fare clic sul pulsante per visualizzare il menu. Fare di nuovo clic sul pulsante per nascondere il menu.

Consigli e avvertenze

  • È necessario caricare il codice modifiche al tuo host Web per promuovere le modifiche al server di vivere.