Cliquez/touchez le bouton en haut à gauche.
<input class="hamburger" type="checkbox" id="votre_id" tabindex="0">
<label for="votre_id" aria-label="Menu"></label>
<nav>
<ul>
<li><a tabindex="0" href="#!">Rubrique 1</a></li>
<li><a tabindex="0" href="#!">Rubrique 2</a></li>
<li><a tabindex="0" href="#!">Rubrique 3</a></li>
<li><a tabindex="0" href="#!">Rubrique 4</a></li>
<li><a tabindex="0" href="#!">Rubrique 5</a></li>
</ul>
</nav>
*,*::before,*::after{box-sizing: border-box}
input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.hamburger+label{
cursor: pointer;
width: 60px;
height: 60px;
display:flex;
align-items:center;
justify-content: center;
position: fixed;
top:1rem;
left:1rem;
z-index:1;
background:#ffffff;
border-radius: 9999px;
box-shadow:0 0 5px rgba(0, 0, 0, 0.4)
}
.hamburger+label span {
background: #6753ea;
width: 40px;
height: 5px;
position: relative;
}
.hamburger+label span::before,
.hamburger+label span::after {
position: absolute;
background: #6753ea;
width: inherit;
height: inherit;
content: "";
}
.hamburger+label span::before {
top: -10px;
}
.hamburger+label span::after {
top: 10px;
}
.hamburger:checked+label span {
background: transparent;
}
.hamburger:checked+label span::after,
.hamburger:checked+label span::before {
top: 0;
}
.hamburger:checked+label span::before {
transform: rotate(45deg);
}
.hamburger:checked+label span::after {
transform: rotate(-45deg);
}
nav ul{list-style-type: none;padding-left:0;margin:0}
nav::before {
position: fixed;
top: 0;
left: 0;
content: "";
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
clip-path: circle(40px at 40px 40px);
visibility: hidden;
}
.hamburger:checked+label~ nav::before {
visibility: visible;
clip-path: circle(150% at 100% 100%);
}
nav ul{display:grid;justify-items:center;position: fixed;top:0;left:0;bottom:0;right:0;}
nav ul li{align-self:center}
nav a {
font-size:2vmax;
color:white;
opacity: 0;
visibility: hidden;
transition: visibility 500ms,opacity 500ms 35ms ;
}
.hamburger:checked+label~ nav a {
visibility: visible;
opacity: 1;
}
.hamburger:focus-visible~label,
nav a:focus-visible,
nav a:focus {
outline: 2px solid #6753ea;
outline-offset: 4px;
}
.hamburger:not(:focus-visible)~label,
nav a:not(:focus):focus-visible{
outline: none;
}
.hamburger:not(:focus-visible):focus~label{
box-shadow: 0 0 0 4px hsl(248, 78%, 58%)
}
@media (prefers-reduced-motion: no-preference) {
.hamburger+label span {
transition: background 10ms 300ms;
}
.hamburger+label span::before,
.hamburger+label span::after{
transition: top 300ms 350ms, transform 300ms 50ms;
}
.hamburger:checked+label span::after,
.hamburger:checked+label span::before {
transition: top 300ms 50ms, transform 300ms 350ms;
}
.hamburger:focus-visible~label,nav a:focus-visible,
nav a:focus {
transition: outline-offset .25s ease;
}
nav::before{
transition: clip-path 500ms ease-in-out,visibility 500ms ease-in-out;
}
}