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.

4.3 3 Votes
Évaluation de l'article
S'abonner
Recevoir des notifications pour :
guest

* * Cette case à cocher est obligatoire

*

J'accepte

4 Commentaires
Nouveaux
Anciens Meilleurs votes
Commentaires publiés
Voir tous les commentaires
Yvan
Yvan
7 années plus tôt

Merci, ça marche super. Comme le code esr clair, on peut facilement le paramétrer.
Une question: comment faire pour maintenir le menu choisi déroulé? Là, quand on enlève la souris, il se referme automatiquement. J’aimerais pouvoir le fermer sur un clique de souris.
Merci!

Marie@chèque emploi service
Marie@chèque emploi service
12 années plus tôt

Bonjour Jerome,

Tout d’abord merci pour ce tutorial clair et précis, je vais pouvoir l’intégrer à mon site, je t’enverrai le résultat dans les commentaires, tu me diras ton avis si tu le souhaite ! 🙂

L’as tu testé avec WordPress? Sais-tu si ce code est compatible avec des thèmes en full flash?

Merci bien, bonne journée !

Marie