Un menu a tendine con i CSS
In giro si trovano tantissimi tutorial e script per creare ottimi menu a tendina con Javascript e jQuery.
Non è detto però che si debba usare per forza JS o un derivato.
Per creare un semplice menu possiamo anche usare il semplice CSS.
Partiamo dalla struttura di base HTML:
<div id="menu">
<ul> <!-- MENU PRINCIPALE -->
<li><a href="#">Voce 1</a>
<ul> <!-- PRIMO SOTTOMENU -->
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
</ul> <!-- FINE PRIMO SOTTOMENU -->
</li><li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
</ul>
</div>
Ho messo 4 voci di menu e un sottomenu alla prima voce.
A questo punto passiamo al CSS:
#menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
border-top: 1px solid black;
}#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}#menu li {
width:100px;
float:left;
margin: 0;
padding: 0;
}#menu a {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
#menu a:hover {
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}#menu li ul { /* NASCONDO I SOTTOMENU */
display: none
}
#menu li:hover ul { /* MOSTRO IL SOTTOMENU AL PASSAGGIO DEL MOUSE */
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}/* UN PO' DI SITLE PER I LINK */
#menu li li {
border: none;
width: 150px;
}
#menu li li a {
padding: 2px 2px 2px 10px;
}
Il CSS è un pò lungo ma abbastanza semplice.
Prima ci sono le regole per il div che contiene il menu e per le voci fisse.
Poi le regole per i menu a comparsa.
Non tutto è obbligatorio; alcune cose sono per migliorare un pò la visualizzazione.
Enjoy!
css javasript jquery menu a tendina
6 Commenti
Grazie.sto sito web è il numero unoooooooooo
15/05/2013LA PROCEDURA E' QUELLA DESCRITTA IN QUESTA PAGINA GRAZIE
20/02/2013SALVE SCUSATE PER FAVORE CERCO QUALCUNO CHE MI AIUTI QUESTA PROCEDURA PER COSTRUIRE IL MENU A TENDINA CON I CSS VA BENE ANCHE PER INTERNET ESPLORER E MOZILLA FIREFOX E SE SI DESIDERA INSERIRLA IN UN SITO INTERNET ADATTANDOLA ALLE PROPIE ESIGENZE COSA ALTRO BISOGNA FARE GRAZIE.
20/02/2013Neanche a me funziona con IE, uso IE8 :sad:
30/11/2012ciao!!<br />ad essere sincero non mi ricordo se ho fatto un test con tutti i browser.<br />che versione di IE stai usando??
30/11/2012ma non funziona con IE :(
30/11/2012