Un menu accordéon full HTML5 et CSS3

Dans ce billet, nous allons voir comment créer un menu accordéon, très en vogue sur le net, en utilisant uniquement le HTML5 et le CSS3. A travers cet exemple, nous verrons que l’on peut créer un menu accordéon sans utiliser de javascript.

Le code HTML du menu accordéon HTML/CSS

De façon très simple, le code html est principalement constitué d’une liste non ordonnée.

<div class="accordeon">
<ul>
<li>
<p class="titre">Menu 1</p>
<div>
Votre contenu textuel...
</div>
</li>
<li>
<p class="titre">Menu 2</p>
<div>
Votre contenu textuel...
</div>
</li>
<li>
<p class="titre">Menu 3</p>
<div>
Votre contenu textuel...
</div>
</li>
<li>
<p class="titre">Menu 4</p>
<div>
Votre contenu textuel...
</div>
</li>
</ul>
</div>

Ce code html nous donne la structure du menu mais ne permet pas d’obtenir visuellement un menu accordéon. Nous allons donc procéder à l’élaboration de l’effet accordéon du menu et lui donner un aspect plus attractif.

Le code CSS du menu accordéon HTML/CSS

Le code css doit être incorporé de préférence dans une feuille de style externe à la page contenant le code html.Pour appeler une feuille de style depuis votre page html, il vous suffit d’incorporer la ligne de code suivante (par exemple) :

<link rel="stylesheet" href="messtyles.css" type="text/css" media="all" />

La propriété CSS3 transition

Pour animer notre menu accordéon, nous allons utiliser la propriété CSS transition. Cette propriété CSS3 permet d’animer des éléments de votre page HTML. Il est possible de définir la durée de la transition, le retard ou l’avance du départ de la transition, la fonction de transition, les propriétés CSS à animer.

Pour en savoir plus sur la propriété transition, je vous invite à consulter le tutoriel d’ Alsacréations sur les transitions CSS3.

Le code CSS3 du menu accordéon

.accordeon ul {
margin:0;
padding:0;
list-style:none;
width : 300px;
}

.accordeon ul li {
display:block;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
width : 300px;
height:30px;
background-color: #6FF;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
transition:  height 0.3s ease-in-out;
-moz-transition:  height 0.3s ease-in-out;
-webkit-transition:  height 0.3s ease-in-out;
-o-transition:  height 0.3s ease-in-out;
}

.accordeon ul li .titre {
display:block;
margin:0;
padding:10px;
height:19px;
border-top:  #f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
font-size:80%;
color:#000;
background: grey;
}

.accordeon ul li div {
margin:0;
overflow:auto;
padding:10px;
height:150px;
background: grey;
}

.accordeon  ul li:hover {
height:150px;
}

.accordeon:hover ul li .titre:hover {
color:#fff;
background:#000;
font-size:80%;
}

.accordeon ul li .titre:hover {
cursor:pointer;
}

Et voilà, maintenant,vous savez créer un menu accordéon HTML5/CSS3 sans utiliser de javascript.

A vous de jouer ! A vos marques, prêt, Notepadez !

Il vous suffit de personnaliser le code pour adapter ce menu à vos besoins.