Programmation ⇒ html/css3 facebook twitter youtube

Menus HTML - CSS ⇒ & Menu déroulant en CSS3 avec transition et max-height



Le menu déroulant est très sensible. De par sa nature, il est bien souvent considéré comme peu ergonomique, inaccessible et dans certains cas il est l’illustration d’un mauvais travail sur l’arborescence d’un site.

 

Un bout de HTML

<nav>
<ul id="menu">
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sous Menu 1.1</a></li>
            <li><a href="#">Sous Menu 1.2</a></li>
        </ul>
    </li><li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sous Menu 2.1</a></li>
            <li><a href="#">Sous Menu 2.2</a></li>
            <li><a href="#">Sous Menu 2.3</a></li>
            <li><a href="#">Sous Menu 2.4</a></li>
        </ul>
    </li><li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sous Menu 3.1</a></li>
            <li><a href="#">Sous Menu 3.2</a></li>
            <li><a href="#">Sous Menu 3.3</a></li>
        </ul>
    </li>
</ul>

</nav>

 

Les chevrons fermants et ouvrants des li de premier niveau sont collés pour éviter le white-space.

 

Place au CSS

Je ne vais pas détailler ici la partie sur la création d’un menu horizontal. Je vous invite à lire le tutoriel « Créer un menu horizontal centré » qui reprend une partie des explications.

 

/* partie positionnement et déco */
 #menu {
    padding: 0; margin: 0;
    text-align: center; /* centrer le texte */
}
#menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
}
#menu > li,
#menu > li li {
    position: relative;
    display:inline-block;
    width: 150px;
    padding: 6px 15px;
    background-color: #777;
    background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
    border-right: 1px solid #777;
    border-radius: 8px 0 0 8px;
}
#menu > li + li {
    border-left: 1px solid #aaa;
    border-right: 1px solid #777;
}
#menu > li:last-child {
    border-right:0;
    border-left: 1px solid #aaa;
    border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
    background-color: #999;
    background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
    position: absolute;
    top: 2em; left:0;
    max-height:0em;    
    margin:0; padding:0;
    background-color:#ddd;
    background-image: linear-gradient(#fff,#ddd);
    overflow:hidden;
    transition: 1s max-height 0.3s;
    border-radius: 0 0 8px 8px;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
    /* need an adaptation, lower is better, but see it large  ;)  */
    max-height:13em;
}

Démonstration


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces