Guillaume Duverger Développeur & graphiste - Blog

Responsive menu toggle (CSS Grid transition)

Dernière mise à jour : août 2022

Redimensionnez la fenêtre de votre navigateur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed odio sed odio ullamcorper cursus. Proin massa ligula, semper ac convallis sed, ullamcorper eu mi. Sed in nisl nisi. Vestibulum mollis ipsum neque, ac rutrum enim sodales condimentum. Sed fringilla mi risus, non ultricies dui facilisis sed. Quisque rutrum ullamcorper velit ut venenatis. Duis eu scelerisque lorem. Vivamus tristique vitae augue ac semper. Vestibulum condimentum egestas massa quis aliquet. Ut porta ante a lorem auctor pulvinar. Nullam commodo aliquet nisl. Nunc ut ligula turpis. Nunc urna nulla, sollicitudin sit amet eros in, gravida porta ante. Aenean lobortis sed eros vitae aliquet. Donec vitae arcu vel lectus pretium pharetra vitae sit amet lacus. Morbi quis mauris velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non pulvinar justo, at fringilla eros. Donec convallis risus ipsum, tempus imperdiet libero fermentum vel. Proin dapibus quam sed erat auctor, non vestibulum diam commodo. In ac tortor nisl. Cras condimentum metus tristique risus finibus, ut ultrices elit blandit. Sed iaculis leo eros, in dapibus lorem venenatis eget. Nulla porttitor ante ut urna placerat porta. Integer ac nulla eu diam ullamcorper interdum sit amet eget nibh.

Le code :



<input type="checkbox" id="votre_menu">
<label for="votre_menu"></label>

<div class=cadre-demo>

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

<div class="contenu">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed odio sed odio ullamcorper cursus. Proin massa ligula, semper ac convallis sed, ullamcorper eu mi. Sed in nisl nisi. Vestibulum mollis ipsum neque, ac rutrum enim sodales condimentum. Sed fringilla mi risus, non ultricies dui facilisis sed. Quisque rutrum ullamcorper velit ut venenatis. Duis eu scelerisque lorem. Vivamus tristique vitae augue ac semper. Vestibulum condimentum egestas massa quis aliquet. Ut porta ante a lorem auctor pulvinar. Nullam commodo aliquet nisl. Nunc ut ligula turpis. Nunc urna nulla, sollicitudin sit amet eros in, gravida porta ante. Aenean lobortis sed eros vitae aliquet. Donec vitae arcu vel lectus pretium pharetra vitae sit amet lacus. Morbi quis mauris velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non pulvinar justo, at fringilla eros. Donec convallis risus ipsum, tempus imperdiet libero fermentum vel. Proin dapibus quam sed erat auctor, non vestibulum diam commodo. In ac tortor nisl. Cras condimentum metus tristique risus finibus, ut ultrices elit blandit. Sed iaculis leo eros, in dapibus lorem venenatis eget. Nulla porttitor ante ut urna placerat porta. Integer ac nulla eu diam ullamcorper interdum sit amet eget nibh.</p>

</div>
</div>




*,*::before,*::after{box-sizing: border-box}

input{

position: absolute;
left: -100vw

}
	
ul{

list-style-type: none;
padding-left: 0;
margin: 0;

}	
	
p{

padding: 10px;

}
	
	
.cadre-demo ul{
	
display:grid; 
transition:grid-template-rows .4s;
visibility: hidden;
grid-template-rows:repeat(5,0);	

	}
    
.cadre-demo li a{
font-size:1.25rem;
text-transform: uppercase;
background-color: #6753ea;
color: #fff;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
height: calc(200px/5);

	}  
	

	
label[for="votre_menu"]{
	
display: grid;
background-color:#6753ea;
width:48px;
height:48px;
padding:5px;
cursor:pointer;	
	}
	
	
label[for="votre_menu"]::before,
label[for="votre_menu"]::after {
		
content: "";
grid-area: 1/1;
transition: .4s;	
	
	}	
	
	
label[for="votre_menu"]::before{

background:
radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%/*border-radius hack*/,
linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
transform: scale(1)
		
	}
    
label[for="votre_menu"]::after{

padding: 10%;
background: 
radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,/*border-radius hack*/
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0) 100% 100%/60% 60% padding-box content-box;
transform: scale(0);

		 
}
	
#votre_menu:checked+label::before{scale: 0}
	
#votre_menu:checked+label::after{transform: scale(1) rotate(45deg);}
	
	
#votre_menu:checked ~ .cadre-demo ul {
	
visibility: visible;
grid-template-rows: repeat(5,calc(200px/5));	
	
	}

    
@media screen and (min-width:37.5rem){ 


.cadre-demo{

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

	}
	

#votre_menu:checked ~ .cadre-demo{
	
grid-gap: 1rem;
grid-template-columns: 10rem 1fr
	
	}	

	
}

	
@media screen and (min-width:64rem){

    
label[for="votre_menu"]{
	
	display: none
		
	}
	
#votre_menu:checked ~ .cadre-demo,
.cadre-demo{
	
grid-template-columns: initial
	
	}	
	
	
.cadre-demo ul {
	
visibility:visible;
grid-template-rows:initial;

	}
	
#votre_menu:checked ~ .cadre-demo ul{
	
grid-template-rows: auto;
		
	}
	
#votre_menu:checked ~ .cadre-demo{
	
	grid-gap:initial
	
	}
	
	
.cadre-demo ul{
	
display:grid;
grid-template-columns: repeat(5,1fr);

	
	}
	
}


Même exemple, autre méthode. Au lieu d'utiliser le modèle de rendu CSS Grid layout, nous allons jouer avec les marges :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed odio sed odio ullamcorper cursus. Proin massa ligula, semper ac convallis sed, ullamcorper eu mi. Sed in nisl nisi. Vestibulum mollis ipsum neque, ac rutrum enim sodales condimentum. Sed fringilla mi risus, non ultricies dui facilisis sed. Quisque rutrum ullamcorper velit ut venenatis. Duis eu scelerisque lorem. Vivamus tristique vitae augue ac semper. Vestibulum condimentum egestas massa quis aliquet. Ut porta ante a lorem auctor pulvinar. Nullam commodo aliquet nisl. Nunc ut ligula turpis. Nunc urna nulla, sollicitudin sit amet eros in, gravida porta ante. Aenean lobortis sed eros vitae aliquet. Donec vitae arcu vel lectus pretium pharetra vitae sit amet lacus. Morbi quis mauris velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non pulvinar justo, at fringilla eros. Donec convallis risus ipsum, tempus imperdiet libero fermentum vel. Proin dapibus quam sed erat auctor, non vestibulum diam commodo. In ac tortor nisl. Cras condimentum metus tristique risus finibus, ut ultrices elit blandit. Sed iaculis leo eros, in dapibus lorem venenatis eget. Nulla porttitor ante ut urna placerat porta. Integer ac nulla eu diam ullamcorper interdum sit amet eget nibh.

Le code :



<input type="checkbox" id="votre_menu1">
<label for="votre_menu1"></label>

<div class=cadre-demo1>

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

<div class="contenu1">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed odio sed odio ullamcorper cursus. Proin massa ligula, semper ac convallis sed, ullamcorper eu mi. Sed in nisl nisi. Vestibulum mollis ipsum neque, ac rutrum enim sodales condimentum. Sed fringilla mi risus, non ultricies dui facilisis sed. Quisque rutrum ullamcorper velit ut venenatis. Duis eu scelerisque lorem. Vivamus tristique vitae augue ac semper. Vestibulum condimentum egestas massa quis aliquet. Ut porta ante a lorem auctor pulvinar. Nullam commodo aliquet nisl. Nunc ut ligula turpis. Nunc urna nulla, sollicitudin sit amet eros in, gravida porta ante. Aenean lobortis sed eros vitae aliquet. Donec vitae arcu vel lectus pretium pharetra vitae sit amet lacus. Morbi quis mauris velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non pulvinar justo, at fringilla eros. Donec convallis risus ipsum, tempus imperdiet libero fermentum vel. Proin dapibus quam sed erat auctor, non vestibulum diam commodo. In ac tortor nisl. Cras condimentum metus tristique risus finibus, ut ultrices elit blandit. Sed iaculis leo eros, in dapibus lorem venenatis eget. Nulla porttitor ante ut urna placerat porta. Integer ac nulla eu diam ullamcorper interdum sit amet eget nibh.</p>

</div>
</div>




*,*::before,*::after{box-sizing: border-box}

input{
position:absolute;
left:-99999px

}
	
ul{

list-style-type: none;
padding-left: 0;
margin: 0;

}	
	
p{

padding: 10px;

}	

	
.cadre-demo1 ul{

max-height:0;
overflow:hidden;
transition:  .4s;	
}
    
    

.cadre-demo1 li a{
	
font-size:1.25rem;
text-transform: uppercase;
background-color: #6753ea;
color: #fff;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
height: calc(200px/5);

	}  
	

	
label[for="votre_menu1"]{
	
display: grid;
background-color:#6753ea;
width:48px;
height:48px;
padding:5px;
cursor:pointer;	
	}
	
	
label[for="votre_menu1"]::before,
label[for="votre_menu1"]::after {
		
content:"";
grid-area:1/1;
transition:.4s;	
	
	}	
	
	
label[for="votre_menu1"]::before{

background:
radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%/*border-radius hack*/,
linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
transform: scale(1)
		
	}
    
label[for="votre_menu1"]::after{

padding: 10%;
background: 
radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,/*border-radius hack*/
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0) 100% 100%/60% 60% padding-box content-box;
transform: scale(0);

		 
}
	
#votre_menu1:checked+label::before{scale:0}
	
#votre_menu1:checked+label::after{transform: scale(1) rotate(45deg);}
	

	

#votre_menu1:checked ~ .cadre-demo1 ul {

max-height:200px;



}

    
@media screen and (min-width:37.5rem){ 
	
.contenu1{

transition: margin .4s ease

}

#votre_menu1:checked ~ .cadre-demo1 .contenu1{

margin-left:calc(10rem + 1rem);
margin-top:-200px;

} 

.cadre-demo1 ul{

max-width:0;

}
	
#votre_menu1:checked ~ .cadre-demo1 ul{
	
max-width:10rem;
	
}	
	
	
}
	

@media screen and (min-width:64rem){
    
label[for="votre_menu1"]{

display: none

}
    
.cadre-demo1 ul{
	
min-height:calc(200px/5);
min-width:100%;
overflow:visible;
display: flex;
justify-content: space-around;

}
	
.cadre-demo1  ul li {
	
flex:1

}	
	
#votre_menu1:checked ~ .cadre-demo1 .contenu1{
	
margin:initial
	
	}	
	}



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.

haut page