Creazione di un menu di navigazione a discesa per un sito Web prevede incollare codici HTML nel documento HTML della pagina in cui si desidera visualizzare il menu. Aggiungere più URL per il menu, che offre ai visitatori che cliccano ogni opzione multiple opzioni di navigazione, comporta una semplice manipolazione del codice HTML base che comprende le pagine nel menu.
Codice HTML di base
Il codice HTML di base per un menu a discesa utilizza "Elenco" e "Elenco non ordinato" HTML tag, che crea una disposizione gerarchica di link divisi in "padre" principale e opzioni di nascosto "bambino" l'unico vengono visualizzati quando si sceglie l'opzione di genitore. Un esempio di codice HTML per un menu a discesa è come segue:
< ul id = "nav" >
< li >
< a href = "#" > prima discesa scheda < /a >
< ul >
< li >< un href="/index.html" > Homepage < /a >< / li >
<li><a href="photography.html">Photography</a></li>
</UL >
</li >
</UL >
Mentre le opzioni di bambino appaiono nel tag "Elenco" all'interno "Unordered List" o < ul > elementi, appena dietro il "Lista" o < li > tag, viene visualizzata l'opzione di genitore.
Aggiunta di schede e altri URL
Per aggiungere una scheda di menu aggiuntive, è sufficiente creare un nuovo elemento padre < li >, come in questo esempio:
< ul id = "nav" >
< li >
< a href = "#" > prima discesa scheda < /a >
< ul >
< li >< un href="/index.html" > Homepage < /a >< / li >
<li><a href="photography.html">Photography</a></li>
</UL >
</li >
< li >
< a href = "#" > seconda discesa scheda < /a >
< ul >
< li >< un href="/contact.html" > contatto < /a >< / li >
<li><a href="testimonials.html">Testimonials</a></li>
</UL >
</li >
</UL >
Per aggiungere elementi di aggiunta a una scheda esistente, aggiungere un nuovo elemento figlio < li > alla scheda, in questo modo:
< li >
< a href = "#" > prima discesa scheda < /a >
< ul >
< li >< un href="/index.html" > Homepage < /a >< / li >
<li><a href="photography.html">Photography</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</UL >
</li >
Dove incollare il codice
Una volta dopo aver montato il codice per il menu e l'URL a cui si desidera collegare all'interno di un editor di testo o codice, incollarlo nel documento HTML o PHP della pagina in cui si desidera aggiungerlo. Il codice dovrebbe andare appena dietro il tag < head > affinché venga visualizzato all'interno della pagina Web. Si incolla contenuto entro o prima il < head > tag non viene visualizzato nella pagina, ma solo all'interno il codice HTML stesso. Salvare il documento HTML, ma non visualizzare in anteprima la pagina Web ancora.
Cambiare l'aspetto del Menu
Modifica dell'aspetto del menu prevede l'utilizzo di foglio di stile CSS o codice "CSS" per modificarne il colore, il tipo di carattere viene utilizzato e, di fatto, a dare il menu..--che altrimenti apparirebbe come una tabella di dati, la funzionalità di menu a discesa. Un esempio di codice CSS da utilizzare, che si incolla nel documento Style. CSS per la tua pagina, viene visualizzato di sotto come fa sul Web per gentile concessione di codifica risorse CSS Wizardry:
/------------------------------------\
NAV
*------------------------------------*/
NAV () {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
/ Chiare galleggianti /
float: left;
Larghezza: 100%;
/ Portare il nav di sopra di tutto il resto..--rimuovere il commento se necessario.
Posizione: parente;
z-indice: 5;
/
}
NAV li {
float: left;
margin-right: 10px;
Posizione: parente;
}
NAV a {
display: block;
padding: 5px;
colore: #fff;
background: #333;
Proprietà Text-decoration: none;
}
NAV a: hover {
colore: #fff;
background: #6b0c36;
testo-decorazione: sottolineatura;
}
/--A discesa---/
NAV ul {
Priorità bassa: #fff; / L'aggiunta di che uno sfondo rende l'elenco a discesa funzionano correttamente in IE7 +. Rendere questo più vicino al fondo della tua pagina come possibile (cioè bianco pagina = = sfondo bianco). /
background:RGBA(255,255,255,0); / Ma! Facciamo in modo che lo sfondo completamente trasparente dove possiamo, non vogliamo effettivamente vedere se possiamo aiutare esso... /
list-style: none;
Posizione: absolute;
sinistra:-9999px; / Nascondere fuori dallo schermo quando non necessari (questo è più accessibile rispetto a display: none;) /
}
NAV li ul {
padding-top: 1px; / L'introduzione di un riempimento tra il li e l'un dare l'illusione distanziati gli elementi /
float: none;
}
NAV ul a {
white-space: nowrap; / Stop testo wrapping e creazione di elementi a discesa multi-linea /
}
NAV li:hover ul {/ Display l'elenco a discesa al passaggio del mouse /
Left: 0; / Riportare sullo schermo quando necessario /
}
li:hover NAV un {/ questi creare stati di persistente al passaggio del mouse, che significa il link più in alto rimane 'aleggiava' anche quando il cursore è spostato verso il basso nell'elenco. /
background: #6b0c36;
testo-decorazione: sottolineatura;
}
ul li:hover NAV un {/ stato hover persistente tuttavia creare uno stile globale per collegamenti prima ancora che essi stai oscillati. Qui siamo di annullare questi effetti. /
Proprietà Text-decoration: none;
}
NAV li:hover ul li a: hover {/ qui definiamo gli Stati hover più espliciti..--cosa succede quando si passa il mouse ogni singolo link. /
background: #333;
}
Modificare i valori di colore, font e immagini all'interno di questo codice di esempio per attribuire attributi stilistici desiderati nel menu a discesa all'interno della pagina. Salvare il documento CSS e quindi aprire la pagina in una nuova scheda o finestra per visualizzarne l'anteprima.