Menù a tendina sono diventati un punto fermo nel Web design, fornendo un modo ordinato per presentare grandi quantità di opzioni di navigazione in uno spazio orizzontale o verticale. Esistono diversi motivi che si vorrebbe rompere gli elenchi a discesa in più colonne. Se il vostro liste di link sono in crescita troppo lungo e oscurando altri elementi di design, o se si desidera aggiungere immagini o intestazioni di sottocategoria, più colonne sono una soluzione perfetta. Questa tecnica può essere implementata senza l'uso di script aggiuntivi, ma richiede una conoscenza di base di HTML e CSS.
Istruzioni
1
Creare un contenitore per il vostro menu utilizzando un DIV e assegnargli una classe speciale. Per esempio:
< div class = "menu" >
<!-UL va qui-->
< / div >
La classe di "menu" verrà utilizzata per controllare come viene visualizzato il contenitore e stile la lista non ordinata che verrà creato successivamente.
2
Inserire un non ordinato elenco (UL) tra il DIV tag dove "<!-UL va qui-->" è illustrato nell'ultimo esempio. L'elenco deve contenere i principali navigazione collega che, quando cliccato, produrrà 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 la seconda voce di elenco (LI) contiene un commento che indica dove deve essere inserito il sottomenu. Inserire l'elenco di sottomenu all'interno di tag list del tuo oggetto di collegamento principale vi permetterà di controllare la sua visibilità e suddividere il testo in colonne.
3
Sostituire la "<!-Sub menu va qui-->" commento con un elenco non ordinato contenente il tuo link di 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 di foglio di stile per la classe "menu" o inserirli nella tua testa di documento utilizzando i tag di "stile < >". Il primo stile dovrebbe definire l'aspetto generale della vostra barra di navigazione e tipo 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 al vostro stile di "ul" un "list-style" di nessuno per creare una barra orizzontale. È inoltre necessario definire un'altezza:
. menu ul {
height:35px;
list-style:none;
}
Dare ogni principale "li" un galleggiante sinistro:
. menu li {
float:left;
}
Completare l'aggiunta di stili per la vostra barra di navigazione principale con l'aggiunta di una definizione di collegamento. Minimo, vostra proprietà link 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à display di "blocco" trasforma la parte "cliccabile" del collegamento in uno spazio rettangolare per migliorare l'esperienza utente.
6
Creare uno stile per il sottomenu "ul" e assegnare 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 il z-index sono essenziali per permettere che il sottomenu venga visualizzato sotto la barra di navigazione principale e sopra la parte superiore di qualsiasi altro elemento di design. Definendo una larghezza, è mantenere il menu da soffocamento il contenuto.
7
Aggiungere gli stili per il sottomenu "li" che tiene ogni collegamento di sottomenu. Definire una larghezza di "50%" per consentire le voci di elenco di fluire in due colonne. Ricordatevi di dare a ciascuno una proprietà di visualizzazione di "blocco" così l'intera riga può essere cliccata anziché nel solo testo.
. menu li li {
display:block;
float:left;
margin:0px;
padding:0px;
width:50%;
}
Terminare aggiungendo uno stile per il tuo elenco di sottomenu definire il tipo di carattere, dimensione, colore, comportamento al passaggio del mouse e un display di "blocco".
Consigli & Avvertenze
- Migliorare il vostro menu utilizzando uno script dal menu jQuery per aggiungere ritardi graziosi e librarsi effetti al vostro menu.