Tutoriel Menu Responsive

Par AD_, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Cela fait déjà quelques temps que je test vos tutoriel et cette fois ci, je me trouves devant un problème que je n'arrives pas à résoudre..

Pour une vision global, je souhaivdstes créer un menu responsive pour un thème wordpress. Et tout fonctionné bien jusqu'à l'ajout de la div "site pusher". L'animation se fait bien mais le contenu de mon menu n'est plus affiché. En fait là où le bas blesse c'est qu'en fait il n'y a que le contenu qui n'est plus affiché..
avec site_pusher

Alors que si je ne mets pas en place le "site pusher" voilà ce que j'obtient
sans site_pusher

Bon j'ai trouvé une solution de secours mais ce n'est pas vraiment le résultat que je souhaites
Pseudo solution

Si quelqu'un a une idée je suis preneur. Je sais que le problème vient de mon conteneur "site pusher" mais je ne sais l'identifier.

AD_

3 réponses

Masso, il y a 10 ans

Salut,

ça va être un peu dur pour les personnes qui voudront t'aider si tu ne montres pas le code qui te pose problème.
Je suppose que tu as essayé pas mal de bidouille mais tu as verifié si le contenu de ton menu s'est mal décallé ou qu'il y est des problèmes de z-index ?.

AD_, il y a 10 ans

Oui effectivement j'étais parti pour l'ajouter...
Par contre comme vous pourrez le voir je n'utilises pas compass. Désolé pour la lisibilité!

@media only screen and (max-width: 767px ) { #page-pusher { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .header { position: static; } .menu__icon { position: static; float: left; display: block; width: 50px; height: 120px; cursor: pointer; } .menu__icon:after { content: ""; position: absolute; display: block; top: 30px; left: 10px; width: 25px; height: 0px; -webkit-box-shadow: 0px 10px 0px 2px #6B6B6B, 0px 20px 0px 2px #6B6B6B, 0px 30px 0px 2px #6B6B6B; box-shadow: 0px 10px 0px 2px #6B6B6B, 0px 20px 0px 2px #6B6B6B, 0px 30px 0px 2px #6B6B6B; } .nav { position: absolute; left: 0; top: 120px; bottom: 0; background-color: red; width: 250px; -moz-transform: translateX(-250px); -ms-transform: translateX(-250px); -webkit-transform: translateX(-250px); transform: translateX(-250px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .nav li { height: 40px; display: block; } .nav a { height: 40px; text-decoration: none; color: #FFF; } .with__sidebar #page-pusher { -moz-transform: translateX(250px); -ms-transform: translateX(250px); -webkit-transform: translateX(250px); transform: translateX(250px); } }

pour ce qui est de ma structure :

<div id="page-pusher"> @include('modules.header') <div id="page-content"> <div id="page-wrap"> <!-- Contenu --> </div> @include('modules.footer') </div> </div>

C'est vrai que là ça devrait être plus pratique pour le debug.

Pour ce qui est des z-index j'ai essayer mais sans succès.

AD_, il y a 10 ans

Oui effectivement j'étais parti pour l'ajouter...
Par contre comme vous pourrez le voir je n'utilises pas compass. Désolé pour la lisibilité!

@media only screen and (max-width: 767px ) { #page-pusher { -moz-transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .header { position: static; } .menu__icon { position: static; float: left; display: block; width: 50px; height: 120px; cursor: pointer; } .menu__icon:after { content: ""; position: absolute; display: block; top: 30px; left: 10px; width: 25px; height: 0px; -webkit-box-shadow: 0px 10px 0px 2px #6B6B6B, 0px 20px 0px 2px #6B6B6B, 0px 30px 0px 2px #6B6B6B; box-shadow: 0px 10px 0px 2px #6B6B6B, 0px 20px 0px 2px #6B6B6B, 0px 30px 0px 2px #6B6B6B; } .nav { position: absolute; left: 0; top: 120px; bottom: 0; background-color: red; width: 250px; -moz-transform: translateX(-250px); -ms-transform: translateX(-250px); -webkit-transform: translateX(-250px); transform: translateX(-250px); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .nav li { height: 40px; display: block; } .nav a { height: 40px; text-decoration: none; color: #FFF; } .with__sidebar #page-pusher { -moz-transform: translateX(250px); -ms-transform: translateX(250px); -webkit-transform: translateX(250px); transform: translateX(250px); } }

pour ce qui est de ma structure :

<div id="page-pusher"> @include('modules.header') <div id="page-content"> <div id="page-wrap"> <!-- Contenu --> </div> @include('modules.footer') </div> </div>

C'est vrai que là ça devrait être plus pratique pour le debug.

Pour ce qui est des z-index j'ai essayer mais sans succès.