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