February 1
menu a discesa sono diventati un punto fermo nella progettazione Web, fornendo un modo ordinato di presentare grandi quantità di opzioni di navigazione in uno spazio orizzontale o verticale compatta. Ci sono diversi motivi si vorrebbe rompere i vostri elenchi a discesa in più colonne. Se i vostri elenchi di link stanno crescendo troppo lunga e oscurando altri elementi di design, o se si desidera aggiungere immagini o intestazioni sottocategoria, colonne multiple sono una soluzione perfetta. Questa tecnica può essere implementata senza l'utilizzo di script aggiuntivi, ma richiede una conoscenza di base di HTML e CSS.
1 Creare un contenitore per il menu con un DIV e dargli una classe speciale. Per esempio:
<Div class = "menu">
<! - UL va qui ->
</ Div>
La classe di "menu" verrà utilizzato per controllare l'aspetto del contenitore e allo stile lista non ordinata si creerà la prossima.
2 Inserire una lista non ordinata (UL) tra i tag DIV dove "<! - UL va qui ->" viene mostrato nell'ultimo esempio. L'elenco dovrebbe contenere i principali link di navigazione che, se cliccato, produrranno i menu a discesa. Per esempio:
<Div class = "menu">
<Ul>
<li><a href="link1.html" target="_self">Main Link 1</a></li>
<li><a href="link2.html" target="_self">Main Link 2</a>
<!-- Sub menu goes here -->
</li>
<li><a href="#" target="_self" >Main Item 1</a></li>
</ Ul>
</ Div>
Si noti che il secondo elemento della lista (LI) contiene un commento che indica dove deve essere inserito il vostro sottomenu. Posizionando l'elenco sottomenù all'interno del tag lista del tuo articolo principale collegamento vi permetterà di controllare la propria visibilità e rompere in colonne.
3 Sostituire il "<! - Menu secondario va qui ->" commenta con una lista non ordinata che contiene i link sottomenu. Per esempio:
<Div class = "menu">
<Ul>
<li><a href="link1.html" target="_self">Main Link 1</a></li>
<li><a href="link2.html" target="_self">Main Link 2</a>
<ul>
<li><a href="sub1.html" target="_self">Sub Link 1</a></li>
<li><a href="sub2.html" target="_self">Sub Link 2</a></li>
<li><a href="sub3.html" target="_self">Sub Link 3</a></li>
<li><a href="sub4.html" target="_self">Sub Link 4</a></li>
<li><a href="sub5.html" target="_self">Sub Link 5</a></li>
<li><a href="sub6.html" target="_self">Sub Link 6</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 1</a></li>
</ Ul>
</ Div>
4 Aggiungere stili al foglio di stile per la classe "menu" o inserirli nella tua testa documento utilizzando "<style>" tag. Il tuo primo stile dovrebbe definire l'aspetto generale della vostra barra di navigazione e di carattere. Per esempio:
.Menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family: 'Arial', sans-serif;
font-size:16px;
font-weight:bold;
}
5 Dare il tuo stile "ul" a "list-style" di nessuno per creare una barra orizzontale. È inoltre necessario definire una altezza:
.menu ul {
height:35px;
list-style:none;
}
Dare ad ogni principale "li" un galleggiante di sinistra:
.menu li {
float:left;
}
Terminate aggiungendo stili per la vostra barra di navigazione principale con l'aggiunta di una definizione di collegamento. Come minimo, le proprietà di collegamento dovrebbe includere i seguenti:
.menu li a {
line-height: 35px;
display:block;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
La proprietà line-height centra il testo verticalmente nel bar mentre l'imbottitura crea un ampio spazio tra ogni collegamento. La proprietà di visualizzazione di "blocco" trasforma la parte "cliccabile" del collegamento in uno spazio rettangolare per una migliore esperienza utente.
6 Creare uno stile per il sottomenu "ul" e dargli le seguenti proprietà:
.menu li ul {
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:450px;
z-index:200;
}
La posizione assoluta e z-index sono essenziali per consentire il sottomenu appaia sotto la barra di navigazione principale e sopra la parte superiore di eventuali altri elementi di design. Con la definizione di una larghezza, si mantiene il menu dal soffocando il suo contenuto.
7 Aggiungere stili per il sottomenu "li" che tiene ogni link sottomenu. Definire una larghezza di "50%" per permettere ai vostri voci di elenco di fluire in due colonne. Ricordatevi di dare ciascuno una proprietà di visualizzazione di "blocco" così l'intera riga può essere cliccato e non solo il testo.
.menu Li Li {
display:block;
float:left;
margin:0px;
padding:0px;
width:50%;
}
Finitura con l'aggiunta di uno stile per la vostra lista sottomenu per definire font, la dimensione, il colore, il comportamento passaggio del mouse e un display di "blocco".