Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Les menus

Responsive menu effet toogle (CSS Grid transition)

💡 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.

Code :

HTML


<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>


CSS


*{box-sizing: border-box}

input{position:absolute;left:-99999px}
	
ul{
list-style-type: none;
padding: 0;
margin: 0;}	
	
p{
padding:10px;
text-align: justify;


}	


	
.cadre-demo ul{

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

text-transform: uppercase;
background-color: #7d68e8;
color: white;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
height: calc(160px/5);

	
	}  
	
label[for="votre_menu"]{
	
display: flex;
align-items: center;
justify-content: center;
background-color: #7d68e8;
color: white;
width:48px;height:48px;
padding: .5rem
	
	}
	
label[for="votre_menu"]:before{

content:'☰';
	
	}
    
#votre_menu:checked ~ label[for="votre_menu"]:before{
	 
content:'╳'
		 
}

#votre_menu:checked ~ .cadre-demo ul {
	
visibility: visible;
grid-template-rows:repeat(5,calc(160px/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:62.75rem){
    
label[for="votre_menu"]{
	
	display: none
		
	}
	
#votre_menu:checked ~ .cadre-demo,
.cadre-demo,
article ul{
	
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:0
	
	}
	
	
.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 sur 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.

Code :

HTML


<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>


CSS


*{box-sizing: border-box}

input{position:absolute;left:-99999px}
	
ul{
list-style-type: none;
padding: 0;
margin: 0;}	
	
p{
padding:10px;
text-align: justify;


}	

	
.contenu1{

transition: margin .3s ease

}


    
.cadre-demo1 ul{
margin:0;
padding: 0;
height:0;
opacity:0;

}
    
    
.cadre-demo1 ul li a{

text-transform: uppercase;
background-color: #7d68e8;
color: white;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
height: 2rem;

}    
	
label[for="votre_menu1"]{
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: #7d68e8;
color: white;

	}
	
label[for="votre_menu1"]:before{


content:'☰';


	
	}
    
#votre_menu1:checked ~ label[for="votre_menu1"]:before{

content:'╳'

}

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

margin-top: calc(5*2rem)

}
    
#votre_menu1:checked ~ .cadre-demo1 ul {

transition: opacity 1s;
opacity: 1

}

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


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

margin: -2rem 0 0 9rem

} 

.cadre-demo1 ul{

width: 9rem

}
}

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

display: none

}
    
.cadre-demo1 ul{

height: auto;
opacity: 1

}
    
.cadre-demo1  ul{
	
display: flex;
justify-content: space-around;
flex-direction: row;
width: auto;
margin: 1rem auto

}
	
.cadre-demo1  ul li {
	
width: calc(100%/5)

}	
	
#votre_menu1:checked ~ .cadre1 .contenu1{
	
margin:initial
	
	}	
	}
   

Support navigateurs :

CSS property: gap: Supported in Grid Layout

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.