Hamburger menu en CSS
De plus en plus présent sur les sites web du monde entier, le menu dit "hamburger" tend à devenir une norme, ce qui est une bonne chose à mon sens.
Il existe plusieurs manières de le mettre en place, soit avec une image, soit avec une police de caractères ou encore, comme ce cas-ci, avec du pur css.
Vous allez voir : c'est ultra simple !
On commence par indiquer un input de type checkbox (pour simuler un lien cliquable) auquel on attribue un identifiant unique et qu'on rattache à un label.
<input type="checkbox" id="votre_id">
<label for="votre_id"></label>
Le résultat brut (varie selon le navigateur, il s'agit d'un objet remplacé) :
Nous allons dès lors styliser cette case à cocher. Comme il existe de multiples manières de styler un input en CSS, l'idée ici est de créer trois barres les unes en dessous des autres. Comment ? Avec les pseudo-éléments ::before et ::after. On met en place une class (facultatif, on peut tout aussi bien styler l'input directement, soit en visant l'élément, soit en utilisant l'id), au sein de la case à cocher.
Ce qui nous donne ceci :
CSS
*{box-sizing: border-box}
.menu_hamburger{
display:none
}
.menu_hamburger+label {
top: 20px;
position: relative;
width: 100px;
height: 10px;
display: block;
background: #7A5FFF
}
.menu_hamburger+label:before {
display: block;
position: absolute;
content: '';
width: 100%;
height: 10px;
background: #7A5FFF;
left: 0;
top: 20px
}
.menu_hamburger+label:after {
display: block;
position: absolute;
content: '';
left: 0;
width: 100%;
height: 10px;
background: #7A5FFF;
top: 40px
}
On va ensuite utiliser les transformations CSS pour faire pivoter les trois barres. Tandis que la première et la deuxième vont fusionner pour ne faire qu'une seule barre, la troisième va venir croiser les deux autres barres et ainsi former une croix. Astucieux, n'est-il pas ?
*{box-sizing:border-box}
.menu_hamburger{
display:none
}
.contenu_ham{
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center
}
.menu_hamburger+label {
position: relative;
top: 0;
width: 100px;
height: 10px;
display: flex;
background: #7A5FFF;
cursor: pointer;
transition: transform .4s
}
.menu_hamburger+label:before {
display: block;
position: absolute;
content: '';
width: 100%;
height: 10px;
background: #7A5FFF;
left: 0;
top:-20px
}
.menu_hamburger+label:after {
display: block;
position: absolute;
content: '';
left: 0;
top: 20px;
width: 100%;
height: 10px;
background: #7A5FFF;
}
.menu_hamburger:checked+label{
top:0;
transform:rotate(45deg)
}
.menu_hamburger:checked+label:before{
top:0
}
.menu_hamburger:checked+label:after{
transform:rotate(-90deg);
top:0
}
Autre exemple :
<input class="menu_hamburger1" type="checkbox" id="menu_hamburger1">
<label for="menu_hamburger1">
<span></span>
</label>
CSS
*{box-sizing: border-box}
.menu_hamburger1{
display:none
}
.menu_hamburger1 + label{
position: relative;
width: 96px;
background-color: #7A5FFF;
height: 96px;
cursor: pointer;
display: inline-block
}
.menu_hamburger1 + label span{
position: absolute;
top: 44px;
left: 18px;
right: 18px;
height: 8px;
background: hsl(0, 0%, 100%)
}
.menu_hamburger1 + label span:after,
.menu_hamburger1 + label span:before{
position: absolute;
left: 0;
width: 100%;
height: 8px;
background-color: hsl(0, 0%, 100%);
content: ""
}
.menu_hamburger1 + label span:before{
top: -20px
}
.menu_hamburger1 + label span:after{
bottom: -20px
}
.menu_hamburger1 + label span:after,
.menu_hamburger1 + label span:before{
transition: .3s
}
.menu_hamburger1:checked +label{
background-color: #7A5FFF
}
.menu_hamburger1:checked + label span{
transition: 1s;
transform: rotate(45deg)
}
.menu_hamburger1:checked + label span:before{
top:0
}
.menu_hamburger1:checked +label span:after{
bottom:0;
transform:rotate(-90deg)
}
Exemple avec animation CSS
<label for="menu_hamburger2">
<svg class="anim-svg" height=32 width=32 viewBox="0 0 64 64">
<rect width="16" height="16" x="0" y="0"/>
<rect y="24" x="0" height="16" width="16"/>
<rect width="16" height="16" x="0" y="48"/>
<rect y="0" x="24" height="16" width="16"/>
<rect width="16" height="16" x="24" y="24"/>
<rect y="48" x="24" height="16" width="16"/>
<rect width="16" height="16" x="48" y="0"/>
<rect y="24" x="48" height="16" width="16"/>
<rect width="16" height="16" x="48" y="48"/>
</svg>
</label>
CSS
*{box-sizing: border-box}
.menu_hamburger2{
display: none
}
label[for=menu_hamburger2]{
cursor: pointer;
}
label[for=menu_hamburger2]:after{
font-size:.875rem;
display: block;
content:'MENU'
}
#menu_hamburger2:checked~label:after{
content:"FERMER"
}
#menu_hamburger2+label{
display: flex;
align-items: center;
flex-flow: column;
}
#menu_hamburger2:checked~label .anim-svg rect{
animation:none
}
#menu_hamburger2:checked~label .anim-svg rect:nth-child(2),
#menu_hamburger2:checked~label .anim-svg rect:nth-child(4),
#menu_hamburger2:checked~label .anim-svg rect:nth-child(6),
#menu_hamburger2:checked~label .anim-svg rect:nth-child(8){
visibility:hidden
}
.anim-svg rect{
fill: #7A5FFF;
animation: anim-svg 9s infinite
}
.anim-svg rect:nth-child(2){
animation-delay: 1s
}
.anim-svg rect:nth-child(3){
animation-delay: 2s
}
.anim-svg rect:nth-child(4){
animation-delay: 3s
}
.anim-svg rect:nth-child(5){
animation-delay: 4s
}
.anim-svg rect:nth-child(6){
animation-delay: 5s
}
.anim-svg rect:nth-child(7){
animation-delay: 6s
}
.anim-svg rect:nth-child(8){
animation-delay: 7s
}
.anim-svg rect:nth-child(9){
animation-delay: 8s
}
@keyframes anim-svg{
from{
opacity: .2
}
to{
opacity: 1
}
}
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.