HTML unordered list - spesso utilizzato per visualizzare gli elenchi semplici..--anche visualizzate nelle pagine Web del mondo sotto forma di menu. Un menu può apparire nella parte superiore della pagina orizzontalmente o verticalmente lungo i lati della pagina. Si trova spesso il menu di navigazione sulla sinistra. Aggiungendo una piccola funzionalità JavaScript a un menu verticale, è possibile creare un menu a discesa effetto. I visitatori del sito possono quindi fare clic su un collegamento per aprire e chiudere il menu ogni volta che a loro piace.

Istruzioni

1

Lanciare il vostro elaboratore di testi o un programma di editing HTML.

2

Aprire un documento HTML e individuare la sezione del corpo. Incollare il codice riportato di seguito in questa sezione:

< un href="javascript:manageMenu('menuContainer')" > Attiva/Disattiva Menu < /a >

< div id = "menuContainer" >

< ul id = "menu1" >
< li >< un href = "Add Link Here" > Prodotti < /a >< / li >
< li >< un href = "Add Link Here" > download < /a >< / li >
< li >< un href = "Add Link Here" > aiutare < /a >< / li >
</UL >

< / div >

La prima istruzione crea un collegamento. Questo link viene eseguita una funzione JavaScript che attiva e disattiva il menu verticale a sinistra e si spegne. Si noti che l'istruzione passa l'ID del div contenitore del menu. L'istruzione successiva crea il contenitore div che contiene il menu. Valore ID del div corrisponde a "menuContainer". Le ultime istruzioni creano la lista non ordinata. Ogni voce dell'elenco, li, nell'elenco contiene un tag di ancoraggio che crea un collegamento. Sostituire "Add Link Here" con gli URL delle pagine presenti sul tuo sito Web o altrove sul Web.

3

Aggiungere il codice CSS riportato di seguito alla sezione di stile del documento:

menuContainer

{
display: none;
}

UL #menu
{
Larghezza: 100px; margin-left: 10px; stile del bordo: punteggiato; border-width: 2px; bordo-colore: marrone rossiccio;
}

Menu1 li

{
display: block; list-style-type: none; colore: blu;
}

Menu1 a {

Proprietà Text-decoration: none;
}

Menu1 un: hover {

Proprietà Text-decoration: underline; background-color: giallo;
}

Il primo selettore CSS proprietà display del contenitore impostata su "none". Questo rende il menu invisibile quando viene caricata la pagina Web. Selettore dell'ul #menu definisce nel modo desiderato dal menu a guardare. In questo esempio, gli attributi impostati dal menu margine, bordo stile e colore del bordo per il valore indicato. Il selettore di li #menu1 imposta l'attributo di visualizzazione degli elementi dell'elenco per "bloccare". Questo li fa apparire verticalmente verso il basso la pagina. Se non si include questo valore, le voci di menu apparirebbe orizzontalmente attraverso la pagina. L'attributo di list-style-type' valore è "none". Questa operazione rimuove le pallottole che normalmente appaiono all'inizio delle voci di elenco. L'attributo di colore: blu imposta il colore delle voci di menu al blu. Cambiare questo colore per qualcosa che ti piace. Il selettore CSS seguente, #menu1 a, rimuove le sottolineature che appaiono sotto i collegamenti per impostazione predefinita. Il selettore finale rende la sottolineatura e cambia colore di sfondo di un elemento in giallo quando si sposta il mouse sopra l'elemento.

4

Incollare la funzione JavaScript seguente sotto il codice aggiunto nel passaggio precedente::

Function manageMenu(menuID) () {
var menuObject = document.getElementById(menuID);

Se (menuObject.style.display = = "none" | | menuObject.style.display = = "")
menuObject.style.display = "blocca";

else menuObject.style.display = "none";
}

Questa funzione recupera l'ID del contenitore passato alla funzione quando clicchi il link "Attiva/Disattiva Menu" link. Il codice imposta quindi lo stile di visualizzazione del contenitore per "bloccare" se è "none" e "none" se è "blocca". Questo causa il menu a tendina e comprimere ogni volta che si sceglie il collegamento.

5

Salvare il documento HTML e aprirlo nel browser. Fare clic sul collegamento "Visualizza Menu Items". Il codice viene eseguito e viene visualizzato il menu a discesa sinistro.

Consigli & Avvertenze

• Quando si costruisce i proprio menu a discesa verticali sinistro, sostituire link riportati in questo esempio con il proprio URL che punti ai percorsi sul Web che sono rilevanti per voi. È anche possibile provare diversi stili di elenchi utilizzando valori diversi per colore, imbottitura, margini, carattere confine e altri attributi nella sezione di stile CSS.