Guillaume Duverger Développeur & graphiste - Blog

Hamburger menu en CSS

Dernière mise à jour : septembre 2022

Le code :



<nav>
<input type="checkbox" role="button" aria-label="Ouvrir le menu" aria-expanded="false" aria-controls="menu">
<ul id="menu">

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




*,
*::before,
*::after {
  box-sizing: border-box;
}
	
@font-face{font-family:'Lato';font-style:normal;font-display:swap;font-weight:400;src:local('Lato Regular'),local('Lato-Regular'),url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}	

body{margin:0;font-family: "lato",system-ui}	
	
nav {
	
padding: 40px;	
background: #6753ea;
display:flex;
justify-content: flex-end
	
}	
	
	
nav input {

display: grid;
width: 40px;
aspect-ratio: 1;
overflow: hidden;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
	
}
	
nav input::before,
nav input::after {
	
content: "";
grid-area: 1/1;
transition: .3s;
z-index:1;
	
}
	
nav input::before {

background:
radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%,
linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
	
	}
	
nav input::after {
	
padding: 10%;
background: radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,
conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0)
100% 100%/60% 60% padding-box content-box;
transform: rotate(45deg);
opacity:0;
	
}	
	
nav input:checked::before {
	
  transform: translate(100%);
  opacity:0;
}
	
nav input:checked::after {
  
  opacity:1;
}
	
	
	
  
ul {
	
margin: 0;
padding:0;
list-style:none;
position: fixed;
background: inherit;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
row-gap: 30px;
transform: translate(-100%);
will-change: transform,opacity;
opacity: 0;
transition: .3s;
	
  }
	
nav ul li a {
	
padding: 10px 20px;
color: #fff;
text-decoration: none;
font-size: 1.25rem;

}
  
nav input:checked + ul {

transform: unset;
opacity: 1;
	
  }
		

@media (min-width:37.5rem) {
	
nav input{
	
display:none
	
	}
	
ul{
	
opacity: 1;
transform: unset;
gap: unset;
position: initial;
flex-flow: initial;
margin-left: auto;
  
}

}	





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