Bonjour,

Je m'entraîne à refaire de tête un effet menu que j'ai trouvé sur Codepen (https://codepen.io/jasperlachance/pen/yOJdRr?editors=1100#0) et sur mon propre HTML/CSS je n'arrive pas à faire apparaître les trois barres.

HTML

<label class="menu-open-button" for="bjr">
	<span class="line line-1"></span>
	<span class="line line-2"></span>
	<span class="line line-3"></span>	
</label>
<input type="checkbox" class="menu-open" id="bjr" />

CSS

body {
	margin: 0;
	width: 1300px;
	text-align: center;
}

.menu-open-button {
	width: 80px;
	height: 80px;
	border-radius: 100%;
	background: #eee;	
	position: absolute;
	margin-left: -40px;
	text-align: center;
	line-height: 80px;	
}

.menu-open {
	display: none;
}

.line {
	width: 25px;
	height: 3px;
	background-color: red;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -12px;
	margin-top: -1.5px;
	-webkit-transition: transform 200ms;
	transition: transform 200ms;
}

.line-1 {
	-webkit-transform: translate3d(0, -8, 0);
	transform: translate3d(0, -8, 0);
}

.line-2 {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.line-3 {
	-webkit-transform: translate3d(0, 8, 0);
	transform: translate3d(0, 8, 0);
}

Quand je lance le HTML j'ai ça :



Je n'arrive pas à voir où ça bloque.



C'est bien cette partie du CSS qui positionne les trois lignes, non?

.line-1 {
	-webkit-transform: translate3d(0, -8, 0);
	transform: translate3d(0, -8, 0);
}

Salut,

Dans l'exemple que tu nous donnes via le lien, dans le fichier CSS au niveau de la class "menu-open-button" il y a toute une partie sur les webkits-transform qui n’apparaît pas dans ton fichier CSS.

Je connais très mal les webkits en général mais ça semble initialisé les coordonnés 0,0,0.

.menu-open-button {
   background: #EEEEEE;
   border-radius: 100%;
   width: 80px;
   height: 80px;
   margin-left: -40px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 80px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

J'espère ne pas t'avoir dit de bêtise et bon courage pour la suite.

-
Edité par SofianD 12 octobre 2018 à 11:37:42

@SofianD
Merci pour ta réponse mais il me semblait que c'était une erreur, que ça avait été copié 3 fois sans raison.

Quoiqu'il en soit, je l'ai ajouté à ma feuille CSS mais ça n'a rien changé. J'ai toujours qu'une seule barre au lieu de trois.

Salut,

transform: translate3d(0, -8, 0);

8 quoi ? 8 patates ?

Hello,

Frogweb : tu as un souci avec les patates en ce moment (ça fait 2 fois )  

Lucky13 a écrit:

Hello,

Frogweb : tu as un souci avec les patates en ce moment (ça fait 2 fois )  

Oui j'aime bien

Mais on peut changer, 3 vélos, 3 canards, etc

@Frogweb

Haha! Mince je m'en veux tellement! Ce sont des erreurs d'étourderie tellement bêtes 

Par contre ça veut dire quoi "200ms"? (millisecondes?)

Tsarina a écrit:

@Frogweb

Haha! Mince je m'en veux tellement! Ce sont des erreurs d'étourderie tellement bêtes 

Par contre ça veut dire quoi "200ms"? (millisecondes?)