Tutoriel Menu Responsive

AD_
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é..

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

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

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

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

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

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.