Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Les menus

Menu accordéon horizontal/vertical CSS Grid

Ci-dessous, démonstration d'un menu en accordéon vertical :

Code :

HTML


<div class=cadre-ex>
<div class=cadre-accordeon>
<input type="radio" name="accordeon" id="votre_menu">
<div class=accordeon>
<label for="votre_menu">Rubrique 1</label>
<div class=nav>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>
<div class=cadre-accordeon>
<input type="radio" name="accordeon" id="votre_menu1" checked>
<div class=accordeon>
<label for="votre_menu1">Rubrique 2</label>
<div class=nav>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>
<div class=cadre-accordeon>
<input type="radio"  name="accordeon" id="votre_menu2">
<div class=accordeon>
<label for="votre_menu2">Rubrique 3</label>
<div class=nav>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>	
<div class=cadre-accordeon>
<input type="radio" name="accordeon" id="votre_menu3">
<div class=accordeon>
<label for="votre_menu3">Rubrique 4</label>
<div class=nav>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>		
<div class=cadre-accordeon>
<input type="radio" name="accordeon" id="votre_menu4">
<div class=accordeon>
<label for="votre_menu4">Rubrique 5</label>
<div class=nav>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>	
</div>


CSS


input[type=radio] {display:none}
	
	
/*vertical*/
	
.cadre-ex{

max-width: 300px;
margin: 2rem auto
	
	}
	
.accordeon{
	
display: grid; 
transition:grid-template-rows .4s ease-in-out;
grid-template-rows: 1fr 0;
overflow: hidden;
	
}

.nav ul{
	
list-style-type: none;
padding: 0;
margin: 0
	
	}  
		
.nav li a{
	
background-color: #e5e5e5;
display: flex;
justify-content: center;
height: 2rem;
align-items: center;
	
	}  

.cadre-accordeon label{

cursor : pointer;
display: flex;
background-color: #7A5FFF;
color: white;
padding: .5rem
	
	}	
	
.cadre-accordeon label:before{

content: '↓';
margin-right: 1rem
	
	}
    
.cadre-accordeon input:checked ~ .accordeon label:before{
	 
content:'→'
		 
}	
	
.cadre-ex input:checked ~ .accordeon label,	
.cadre-ex label:hover{
	
filter: saturate(220%)
	
	}	
	
.cadre-accordeon input:checked ~  .accordeon {

grid-template-rows: 1fr 10rem;

	}	
	

Ci-dessous, démonstration d'un menu en accordéon horizontal :

Code :

HTML


<div class=cadre-ex1>
<div class=cadre-accordeon1>
<input type="radio" name="accordeon1" id="votre-menu">
<div class="accordeon1">
<label for="votre-menu">Rubrique 1</label>
<div class=nav1>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>
<div class=cadre-accordeon1>
<input type="radio" name="accordeon1" id="votre-menu1" checked>
<div class=accordeon1>
<label for="votre-menu1">Rubrique 2</label>
<div class=nav1>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>
<div class=cadre-accordeon1>
<input type="radio"  name="accordeon1" id="votre-menu2">
<div class=accordeon1>
<label for="votre-menu2">Rubrique 3</label>
<div class=nav1>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>	
<div class=cadre-accordeon1>
<input type="radio" name="accordeon1" id="votre-menu3">
<div class=accordeon1>
<label for="votre-menu3">Rubrique 4</label>
<div class=nav1>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>
</div>		
<div class=cadre-accordeon1>
<input type="radio" name="accordeon1" id="votre-menu4">
<div class=accordeon1>
<label for="votre-menu4">Rubrique 5</label>
<div class=nav1>
<ul>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
<li><a href="">lien</a></li>
</ul>
</div>
</div>	
</div>	
</div>


CSS


.cadre-ex1 {
margin: 2rem auto;	
overflow: hidden;
display: grid;
grid-template-columns: repeat(5,1fr);
	
}

.cadre-ex1 .accordeon1{

display:grid;
transition:grid-template-columns .4s;
grid-template-columns: 1fr 0;

 }
	


.cadre-ex1 label{

cursor:pointer;
display: flex;
justify-content: center;
align-items: center; 
writing-mode: sideways-lr;
background-color: #7A5FFF;
color: white;
padding: .5rem
	
	}	
	

.cadre-ex1 input:checked ~ .accordeon1 label,	
.cadre-ex1 label:hover{
	
filter: saturate(220%)
	
	}

 .nav1 ul{
	
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
place-items: center;
background-color: #e5e5e5;
	 
	}    
	
.cadre-accordeon1 input:checked ~  .accordeon1  {

grid-template-columns: 1fr calc(100vw/5);

	}	

Support navigateurs :

CSS Grid

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.