28172 sujets

CSS et mise en forme, CSS3

[Résolu] Icone menu (ham)burger

Bonjour à tous.
dans le but de créer un menu responsive, je veux créer une icone burger; j'ai créé une div burger avec une span
<div class="burger"><span></span></div>

puis dans la css j'ai réussi de créer une barre horizontale, mais pas les barres sup et inf avec les pseudo éléments before et after.Voici le code.
.burger { 
 width : 50px;
 height: 50px;
 position: relative;
 cursor: pointer;
 margin-left: 20px;
}
.burger span { 
 width: 100%;
 height: 6px;
 background-color: black;
 display: block;
 top: 50%;
 transform: translateY: (-50%);
}
.burger span:: before,
.burger span:: after { 
 content: '';
 width : 100%;
 height: 6px;
 position: absolute;
 display: block;
 background-color: black;
}
.burger span:: before { 
 transform: translateY: (-16px);
}
.burger span:: after { 
 transform: translateY: (16px);
}

Merci par avance de votre aide ou commentaires. Smiley smile
Bonjour,

Il faut que vous jouiez avec les propriétés top et left pour les before/after. Ca permettra de les positionner dans le parent relatif.

Bien à vous
Modifié par Gus (21 May 2021 - 07:15)
bonjour
La solution du caractère à l'air simplissimme;
il doit être possible de le dimensionenr et coloriser en css,je suppose.
merci
<span class="burger">&#9776;&nbsp;Menu</span>

.burger{
        color:blue;
	font-size:1.4em;
	background:yellow;}

Tu modifies ce que tu veux, la couleur des trois barres, du fond, la taille. Comme du texte, c'est dit plus haut. Et tu te paye le luxe d'ajouter le mot Menu, ce qui ajoute un plus.
Meilleure solution
bonjour.
Merci pour l'idée , c'est une solution.
ceci dit ça ne permet pas de faire une icone animée en css , ce que je voudrais faire au départ.
Merci en tous cas.
Sujet clos
Aller à