Aller au contenu principal
Partagez cette démonstration :

Simple et responsive dropdown menu

Dernière mise à jour : décembre 2022

Le code :



<div class="menu">

<ul>

<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
<li><input type="checkbox" id="label-1"><label for="label-1" aria-label="ouvrir sous-menu">Rubrique</label>

<ul class="sub-menu">
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
</ul>

</li>

<li><input type="checkbox" id="label-2"><label for="label-2" aria-label="ouvrir sous-menu">Rubrique</label>

<ul class="sub-menu">
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
<li><a href="#!">Rubrique</a></li>
</ul>

</li>

<li><a href="#!">Rubrique</a></li>

</ul>





*,
*::before,
*::after{

box-sizing: border-box

}
	

ul{

padding: 0;
list-style: none;

}

label{

cursor: pointer

}
	
	
.menu {
	
margin: 2rem auto;
	
}
	
.menu > ul {

display:grid;
	
}
		
		
.menu > ul > li a,
.menu > ul > li label{

background-color: #3c3c3c;
color: #fafafa;
display: flex;
justify-content: center;
padding: 15px;
text-decoration: none;
 
}

	
.menu > ul > li:not(:last-child){
	
border-bottom:1px solid #222
	
	}	
	
.menu > ul li:not(:last-child) ul li:not(:last-child) a{
	
border-bottom:1px solid #393939
	
	}

.menu > ul li label{
	
position: relative;
	
	}
	
.menu > ul  li label::before {

position:absolute;
right:.5rem;
content:'';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 0;
border-top: 12px solid currentcolor;
top: 0;
bottom: 0;
margin: auto;
transition: .5s;

}
	

.sub-menu {
	
background:rgba(60, 60, 60, 0.8);
list-style: none;
max-height: 0;
overflow: hidden;
transition: .5s;

}
	
	
.menu > ul li input{

display: none

}	
	
.menu > ul li input:checked+label ~.sub-menu {
	
  max-height: 300px;
	
}
	
.menu > ul li input:checked+label::before {
	
 rotate: -180deg;
	
}

.menu > ul .sub-menu li a{

background: rgba(60, 60, 60, 0.6);
font-size: 0.9em;
	
}
		
		
.menu > ul .sub-menu li a:focus {
	
background: rgba(60, 60, 60, 0.1);
	
}

	

@media (min-width: 50rem) {
  
.menu > ul {
  
grid-auto-flow: column
	
  }
	
.menu > ul > li:not(:last-child) {
	
	border-bottom: unset
	
	}	
  
}

@media (min-width: 64rem) {
		
.menu > ul li:nth-child(n+3):not(:last-child){
	
position: relative;
		
		}	
		

	
.menu li a:hover,
.menu li label:hover{

background-color:#6753ea

}
	
.menu > ul .sub-menu li a:hover{
	
  background: rgba(60, 60, 60, 0.1);
	
}	

		
.sub-menu{


transform: scaleY(0);
transform-origin: top;
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 1;	
		
	}	

.menu > ul li:hover label::before,
.menu > ul li:hover input:checked+label::before{ 

rotate: -180deg;

}		

.menu > ul li input:checked+label::before {
	
 rotate: 0deg;
	
}	
	
.menu > ul li:focus-within .sub-menu,
.menu > ul li:hover .sub-menu{

max-height: 300px;
transform: scaleY(1);
	
	}
	


		
		}		
	



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

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.