WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

Menu imbriqué (dropdown) en CSS

Il est possible de créer des menus imbriqués (dropdown) en utilisant uniquement CSS.

Menus imbriqués CSS

La première étape consiste naturellement à créer le menu en HTML


<ul id="nav">
    <li><a href="#">Home</a></li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

<h1>Title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
 

... puis à ajouter le code CSS. Le truc consiste à utiliser le modificateur :hover. En temps normal on cache pas les sous-menus:

#nav ul{ left: -9999px; }

Lorsque la souris se trouve sur l'élément li, on affiche le sous-menu:

#nav li:hover ul{ left: 0; }

Voici un exemple complet en CSS:


#nav{
    list-style: none;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;

    /* ou alors utiliser position: absolute */
    float: left;
    width: 100%;
}

#nav li{
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    position: relative;
}

#nav a{
    display: block;
    padding: 2px 10px;
    color: #fff;
    background: #333;
    text-decoration: none;
}

/* SOUS-MENUS */
#nav ul{
    margin: 0;
    padding: 0;
    background: #fff; /* truc pour IE7 */
    background: rgba(255,255,255,0);
    list-style: none;
    position: absolute;
    /* au lieu d'utiliser display:none;
    on 'pousse' le sous-menu en dehors de l'écran  */

    left: -9999px;
}

#nav ul li{
    float:none;
}

#nav ul a{
    white-space: nowrap;
}

/* ICI est le truc pour afficher le sous-menu */
#nav li:hover ul{
    left: 0;
}

#nav li:hover a{
    background: #666;
}

#nav li:hover ul li a:hover{
    background:#333;
}
 

Articles similaires