Codice HTML per IRLS multipli in un menu a discesa

August 3

Creazione di un menu di navigazione a discesa per un sito web comporta codici HTML incollare nel documento HTML per la pagina in cui si desidera visualizzare il menu. L'aggiunta di più URL al menu, che offre ai visitatori che cliccano ogni opzione molteplici opzioni di navigazione, comporta una semplice manipolazione del codice HTML di base che comprende le pagine del menu.

Codice HTML di base

Il codice HTML di base per un menu a discesa utilizza "Lista" e "Lista non ordinato" tag HTML, che crea una disposizione gerarchica di link suddivisi in "padre" principale e nascosto opzioni "figlio" l'unica appaiono quando si seleziona l'opzione genitore . Un esempio di codice HTML per un menu a discesa è il seguente:

<Ul id = "nav">
<Li>
<a href="#"> prima discesa Tab </a>
<Ul>
<Li> <a href="/index.html"> Homepage </a> </ li>

&lt;li>&lt;a href=&quot;photography.html&quot;>Photography&lt;/a>&lt;/li>

</ Ul>
</ Li>
</ Ul>

L'opzione genitore appare proprio dietro la "Lista" o tag <li>, mentre le opzioni bambini appaiono in tag "Elenco" all'interno "Lista non ordinato" o <ul> elementi.

Aggiunta di URL e schede aggiuntive

Per aggiungere una scheda di menu aggiuntivo, è sufficiente creare un nuovo genitore <li> elemento, come in questo esempio:

<Ul id = "nav">
<Li>
<a href="#"> prima discesa Tab </a>
<Ul>
<Li> <a href="/index.html"> Homepage </a> </ li>

&lt;li>&lt;a href=&quot;photography.html&quot;>Photography&lt;/a>&lt;/li>

</ Ul>
</ Li>
<Li>
<a href="#"> Seconda discesa Tab </a>
<Ul>
<Li> <a href="/contact.html"> contatto </a> </ li>

&lt;li>&lt;a href=&quot;testimonials.html&quot;>Testimonials&lt;/a>&lt;/li>

</ Ul>
</ Li>
</ Ul>

Per aggiungere elementi Oltre a una scheda esistente, aggiungere un nuovo figlio <li> per la scheda, in questo modo:

<Li>
<a href="#"> prima discesa Tab </a>
<Ul>
<Li> <a href="/index.html"> Homepage </a> </ li>

&lt;li>&lt;a href=&quot;photography.html&quot;>Photography&lt;/a>&lt;/li>
&lt;li>&lt;a href=&quot;/contact.html&quot;>Contact&lt;/a>&lt;/li>
&lt;li>&lt;a href=&quot;testimonials.html&quot;>Testimonials&lt;/a>&lt;/li>

</ Ul>
</ Li>

Dove incollare il codice

Una volta assemblato il codice per il menu e gli URL a cui si desidera collegare all'interno di un editor di testo o un codice, incollarlo nel documento HTML o PHP per la pagina in cui si desidera aggiungerlo. Il codice dovrebbe andare proprio dietro il tag <head> in modo che appaia all'interno della pagina Web. Contenuti si incolla all'interno o prima del tag <head> non mostra sulla pagina, ma solo all'interno del codice HTML stesso. Salvare il documento HTML, ma non in anteprima la pagina Web ancora.

Modifica del menu Aspetto

Cambiare l'aspetto del menu comporta l'uso di fogli di stile CSS o codice "CSS" per cambiare il colore, il carattere che utilizza e, in effetti, per dare il menu - che altrimenti apparirebbe come una tabella di dati - la funzionalità menu a discesa . Un esempio di codice CSS da usare, che si incolla nel documento style.css per la tua pagina, compare sotto come fa sulla cortesia Web di codifica Wizardry risorsa CSS:

/

------------------------------------ \
NAV
* ------------------------------------ * /

nav {

list-style: none;
font-weight: bold;
margin-bottom: 10px;
/ Clear galleggia /
float: left;
width: 100%;
/ Portare il NAV di sopra di tutto - rimuovere il commento, se necessario.
position: relative;
z-index: 5;
/
}

nav li {

float: left;
margin-right: 10px;
position: relative;
}

nav un {

blocco di visualizzazione;
padding: 5px;
colore: #fff;
background: # 333;
text-decoration: none;
}

nav a: hover {

colore: #fff;
background: # 6b0c36;
text-decoration: underline;
}

/ --- --- DROPDOWN /

nav ul {

sfondo: #fff; / L'aggiunta di uno sfondo rende il lavoro a discesa correttamente in IE7 +. Rendere questo il più vicino al fondo della pagina il più possibile (cioè bianco pagina == sfondo bianco). /
fondo: RGBA (255,255,255,0); / Ma! Facciamo in modo che lo sfondo completamente trasparente dove possiamo, noi in realtà non vuole vedere se siamo in grado di farne a meno ... /
list-style: none;
position: absolute;
sinistra: -9999px; / Hide off-screen quando non serve (questo è più accessibile di display: none;) /
}

nav ul li {

padding-top: 1px; / L'introduzione di una imbottitura tra la Li e l'a dare gli elementi illusione distanziati /
float: none;
}

nav ul un {

white-space: nowrap; / Stop capo automatico e la creazione di oggetti discesa multilinea /
}

nav li: hover ul {/ Visualizzare la discesa al passaggio del mouse /

left: 0; / Riportare sullo schermo quando necessario /
}

nav li: hover {un / Questi creano persistenti stati hover, cioè il più in alto collegamento rimane 'aleggiava' anche quando il cursore si è spostato verso il basso l'elenco /. background: # 6b0c36;
text-decoration: underline;
} nav li: hover ul un {/

Lo stato hover persistente ha tuttavia creare uno stile globale per i collegamenti, anche prima di essere libravano. Qui si disfa questi effetti. /

text-decoration: none;
}

nav li: hover ul li a: hover {/ Qui si definiscono gli stati hover più espliciti - cosa succede quando si passa ogni singolo link /. background: # 333;
}

Modificare i valori immagine a colori, font e all'interno di questo codice di esempio per attribuire gli attributi stilistici desiderate al menu a discesa all'interno della vostra pagina. Salvare il documento CSS, e quindi aprire la pagina in una nuova scheda o finestra di anteprima.


Articoli Correlati