Menu fullscreen responsive CSS3

🏠 Accueil blog » Démonstrations CSS3
Cliquez sur l'icône en haut à droite

✔ Support navigateurs :


<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>
<li><a href="">rubrique</a></li>
<li><a href="">rubrique</a></li>
</ul>
</nav>
</div>


*{margin:0;padding:0;box-sizing:border-box}
.menu_hamburger,.menu_fullscreen{display:none}   
    
    
.menu_hamburger + label{
cursor:pointer;
position:absolute;
top:0;
right:0;
width:96px;
background-color:hsl(203,77%,61%);
height:96px;
z-index:1}
    
.menu_hamburger + label span{
position:absolute;
top:44px;
left:18px;
right:18px;
height:8px;
background:hsl(0,0%,100%)}
    
.menu_hamburger + label span:after,
.menu_hamburger + label span:before{
position:absolute;
left:0;
width:100%;
height:8px;
background-color:hsl(0, 0%, 100%);
content:""}
 
.menu_hamburger + label span:before{top:-20px}
    
.menu_hamburger + label span:after{bottom:-20px}
    
.menu_hamburger:checked + label span{transition:.4s;transform:rotate(45deg)}
    
.menu_hamburger:checked + label span:before{top:0}
    
.menu_hamburger:checked +label span:after{bottom:0;transform:rotate(-90deg)}
    
  
.menu_hamburger:checked~.menu_fullscreen{
display:block;
height:100%;
width:100%;
background:hsla(0,0%,0%,.8);
top:0;
left:0;
position:fixed}
    
.menu_fullscreen ul{display:flex;justify-content:center;height:100vh;align-items:center;flex-direction:column} 

.menu_fullscreen ul li{font-size:2rem;list-style:none}
    
    
.menu_fullscreen ul li a{
padding:5px 10px;
margin:5px auto;
display:flex;
background:hsla(0,0%,0%,.3);
opacity:.8;
color:#fff}
    
.menu_fullscreen ul li a:hover{
opacity:1;
text-decoration:none;
transition:.6s}
    
    
@keyframes anim{  
0%{transform:scale(0)}  
50%{transform:scale(.9);border-radius:50%} 
100%{transform:scale(1)}
}
  
@media screen and (min-width:62.75rem){.menu_fullscreen{animation:anim 1s cubic-bezier(.250,.460,.450,.940) forwards}}

Voir d'autres démonstrations