Guillaume Duverger - Développement & Graphisme - Blog

Menu fullscreen responsive CSS

💡 Cliquez sur le bouton ci-dessous.

Code :

<input class="menu-hamburger" type="checkbox" id="menu-hamburger">
<label for="menu-hamburger">
<img src="votre-image.svg" alt>
</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>
<li><a href="">rubrique</a></li>
<li><a href="">rubrique</a></li>
</ul>
</nav>
</div>

*{box-szing: border-box}

body{margin: 0}



	
.menu-hamburger,
.menu-fullscreen ul{
	
	display: none
	
	}   
    
    
.menu-hamburger + label{
	
cursor: pointer;
width: 64px;
display: flex;
height: 64px;
z-index: 3
	
	}
	
	
.menu-hamburger + label img{
	
margin:0;
	
height: 64px;
width: 64px;
object-fit: none;
object-position: 0 0;
	
}
	
.menu-hamburger:checked + label img{
	
filter: invert(1);
object-position: 0 -64px
	
	}
    

.menu-fullscreen{
	
will-change: opacity;
transition: opacity .4s;
opacity: 0;
visibility: hidden;
height: 0;
width: 0
	
	}
	
.menu-hamburger:checked~.menu-fullscreen{
	
opacity: 1;
visibility: visible;
height: 100vh;
width: 100%;
-webkit-backdrop-filter: blur(1px);/*safari ios safari*/
backdrop-filter: blur(1px);/*chrome opera*/
background: hsla(0,0%,0%,.8);
position: fixed;
top: 0;
left: 0;
z-index: 2

	}

	
.menu-hamburger:checked + label{
	
	position:fixed;
	top:0;
	right:0
	
	}	
	
.menu-hamburger:checked~.menu-fullscreen ul{

padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh
	
	} 

.menu-fullscreen ul li{
	
font-size: 2rem;

		}
    
    
.menu-fullscreen ul li a{
	
padding: 5px 10px;
margin: 5px auto;
display: flex;
background: hsla(0,0%,0%,.3);
color: #fff
	
	}
    
.menu-fullscreen ul li a:hover{
	
text-decoration: none
		
	}
    
    

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

animation: anim .8s cubic-bezier(.250,.460,.450,.940) forwards
	
	}
	
@keyframes anim{ 
		
0%{
	transform: scale(0)
		
		}  
50%{
	
	transform: scale(.9); 
	border-radius: 50%
		
		} 
100%{
	
	transform: scale(1)
	
	}
		
}
	}

Support navigateurs :

CSS animation