Guillaume Duverger Développeur & graphiste - Blog

Menu fullscreen responsive CSS

Dernière mise à jour : août 2022

Cliquez sur le bouton ci-dessous.

Le code :



<input class="menu-hamburger" type="checkbox" id="menu-hamburger">
<label for="menu-hamburger">
</label>
<div class=menu-fullscreen> 
<nav>

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

</nav>
</div>




*{box-szing: border-box}

.menu-hamburger{
	
display: none
	
	}   
    
    
.menu-hamburger+label{
	
width: 3em;
height:3em;
display: grid;
cursor:pointer;
z-index:2;
	
	}
	

.menu-hamburger+label::before,
.menu-hamburger+label::after {
	
  content:"";
  grid-area:1/1;
  
}
	
.menu-hamburger+label:before {
	
  background:
  radial-gradient(closest-side at 12.5% 25%,#6753ea 96%,#0000) 0 0/80% 40%/*border-radius hack*/,
  linear-gradient(#6753ea 50%,#0000 0) top/80% 40% repeat-y;
	
}
	
.menu-hamburger+label::after {
	
padding: 10%;
background: 
 radial-gradient(closest-side at 50% 12.5%,#6753ea 96%,#0000) top /20% 80% repeat-y,
 radial-gradient(closest-side at 12.5% 50%,#6753ea 96%,#0000) left/80% 20% repeat-x,/*border-radius hack*/
 conic-gradient(from 90deg at 33% 33%, #0000 90deg, #6753ea 0) 100% 100%/60% 60% padding-box content-box;
transform: rotate(45deg);
opacity:0;
}
	
.menu-hamburger:checked+label::before {
	

  opacity:0;
	
}
	
.menu-hamburger:checked+label::after {
  

opacity:1;
transition: opacity .3s 1s;
	
}

    

.menu-fullscreen{
	
will-change: opacity;
transition: opacity .4s;
opacity: 0;
visibility: hidden;
width: 0;
height: 0
	
	}
	
.menu-hamburger:checked~.menu-fullscreen{
	
opacity: 1;
visibility: visible;
display: flex;
background: hsla(0,0%,0%,.8);
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
z-index:1

	}
	
	
.menu-hamburger:checked + label{

position:fixed;
top: 0;
right: 0
	
	}	
	

.menu-fullscreen ul{
list-style-type: none;
margin: 0;
padding-left: 0;
margin: auto
		
	}
	
.menu-fullscreen ul li{
	
font-size: 1.5rem;
margin-bottom:.5rem;
	
		}
    
    
.menu-fullscreen ul li a{
	
padding: .5rem 1rem;
display:inline-block;
color: #fff
	
	}
    
.menu-fullscreen ul li a:hover{
	
text-decoration: none
		
	}
    
    

  
@media screen and (min-width:64rem){
	
.menu-hamburger:checked~.menu-fullscreen{

animation: anim .8s cubic-bezier(.250,.460,.450,.940) forwards
	
	}
	
@keyframes anim{ 
		
0%{
	 scale: 0;
		
		}  
50%{
	
	 scale:.9; 
	border-radius: 50%
		
		} 
100%{
	
	scale: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.

haut page