Nwlapcug.com


Come fare un Menu nascosto con JavaScript

Il linguaggio JavaScript consente di mostrare e nascondere le voci di menu in modo dinamico quando un utente esegue un'azione, ad esempio facendo clic su un pulsante. La proprietà di "stile" di JavaScript vi dà la possibilità di nascondere un menu. Utilizzare menu nascosti per nascondere e visualizzare i collegamenti di spostamento nelle pagine Web. Racchiudere il codice del menu all'interno di un div contenitore circondando con tag "div". Applicare la proprietà di stile CSS per nascondere e mostrare le voci di menu "visibilità".

Istruzioni

1

Pulsante destro del mouse il file HTML che si desidera modificare e selezionare "Apri con". Fare clic su editor HTML della vostra scelta nell'elenco dei programmi che scende verso il basso. Se non avete un editor installato, fare 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 alla fine del menu:

< / div >

Il tag di apertura e chiusura div contengono le voci di menu, quindi è possibile utilizzare il tag div per nascondere il contenuto del menu.

3

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

stile = "visibilità: nascosto"

Il codice sopra riportato si nasconde l'intero menu. Se si inserisce questo codice solo in parte del menu, solo una parte del menu è nascosto.

4

Aggiungere il seguente codice nel tuo file HTML:

< script type = "text/javascript" >

Function hideshow() () {

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

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

else {

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

}

}

< / script >

La funzione JavaScript nasconde il menu se è visibile e viene visualizzato il menu se è nascosto.

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 codice seguente alla pagina:

< input type = "button" onclick="hideshow()" valore = "Mostra o Nascondi Menu" >

6

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

Consigli & Avvertenze

  • È necessario caricare le modifiche al codice al tuo host Web per promuovere i cambiamenti al server dal vivo.