Benvenuti da Idea R | Vicenza - Romano di Lombardia (Bergamo)
Passa alla visualizzazione per i dispositivi mobili

      Idea R - Gli altri sanno chi sei? Progetta la tua identità grafica

Blog

Prendere uno smanettone del software degli anni 80, aggiungere un graphic designer di nuova generazione e allungare il tutto con uno studioso di strategie di marketing. Agitare energicamente e si ottiene il blog Idea R.

Change language... English

Menu dropdown con CSS

Pubblicato il 1/1/2012
Categorie: Siti Web
Tag: CSS, HTML, Tutorial
Menu dropdown con CSS

I menu dropdown si creano molto semplicemente con CSS.
Tipicamente, sia che si tratti di menu orizzontali o verticali, vengono costruiti utilizzando le unordered list, cioè ul. La funzionalità dropdown invece viene creata combinando la pseudoclasse hover assieme alla proprietà visibility di liste annidate.
L'esempio seguente mostra un menu orizzontale in cui le voci si espandono verso il basso quando si posiziona il mouse sopra.

#dropDownMenu ul li
{
    display: inline; /* remove the list bullets */
    float: left; /* horiziontal menu */
    width: 150px; /* limit the width of every item */
}
#dropDownMenu ul li ul
{
    visibility: hidden; /* submenus are hidden */
}
#dropDownMenu ul li:hover ul
{
    /* submenues become visible when the mouse hovers the parent item */
    visibility: visible;
}
<div id="dropDownMenu">
<ul>
    <li><a href="item1.html">Menu Item One</a>
    <ul>
        <li><a href="item1-1.html">Sub menu item one</a></li>
        <li><a href="item1-2.html">Sub menu item two</a></li>
        <li><a href="item1-3.html">Sub menu item three</a></li>
        <li><a href="item1-4.html">Sub menu item four</a></li>
    </ul>
    </li>
    this is a menu item without a submenu
    <li><a href="item2.html">Menu Item Two</a></li>
    <li><a href="item3.html">Menu Item Three</a>
    <ul>
        <li><a href="item3-1.html">Sub menu item one</a></li>
        <li><a href="item3-2.html">Sub menu item two</a></li>
        <li><a href="item3-3.html">Sub menu item three</a></li>
        <li><a href="item3-4.html">Sub menu item four</a></li>
    </ul>
    </li>
</ul>
</div>

Poiché in Internet Explorer 6 la pseudoclasse hover è supportata solo dai collegamenti ipertestuali, non è possibile utilizzare i menu dropdown CSS.
Una soluzione è quella di usare un menu sempre espanso a seconda della versione del browser.

[if IE 6]>
<style type="text/css">
#dropDownMenu ul li ul
{
    visibility: visible; /* submenus are always visible */
}
</style>
<![endif]

Sei il lettore numero 7,015.

Commenti

Articolo precedente

Articolo precedente

Schede personalizzate in Facebook

Articolo successivo

Come cancellare la cache degli oggetti SqlDataSource

Articolo successivo

Torna all'inizio