Signaler

Menu responsive perso [Résolu]

Posez votre question Garig - Dernière réponse le 10 août 2017 à 12:20 par Pitet
Bonjour,

J'essaie de créer un menu responsive dropdown avec du javascript un peu comme le menu responsive Bootstrap mais mon code ne fonctionne pas. Quelqu'un peut-il m'aider svp? Merci

<!DOCTYPE html>
<html>
    <head>
        <title>Menu responsive</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--<link href="fixed.css" rel="stylesheet">-->
        <style rel="stylesheet">
            body{
            margin:0;
            font-family: sans-serif;
            }
            .logo{
                text-transform: uppercase;
                padding: 10px;
                padding-top: 12px;
                text-decoration: none;
                color:#777777;
                font-size: 22px;
                font-weight: bold;
                float:left;
                display:none;
            }
            .fixed{
                position:fixed;
                top:0;
            }
            button{
                float:right;
                background-color: gray;
                margin:7px 10px 0 0;
                padding:5px;
                border:none;
                border-radius: 5px;
                border:1px solid #000;
                color:#fff;
                display:none;
                cursor: pointer;
                background: url('images/hamburger.png');
                width:35px;
                height: 36px;
            }
            .menu ul{
                padding:0;
                margin:0;
                float:left;
                display:block;
            }
            .menu li{
                background-color: none;
                padding:15px 45px;
                border:0px dotted gray;
                margin:0 -3px;
                display:inline-block;
                list-style-type: none;
                font-family: sans-serif;
            }
            .menu li a{
                color:#777777;
                text-transform: uppercase;
                text-decoration: none;
            }
            .menu{
                background-color: black;
                height:51px;
                width: auto;
                margin-bottom:30px;
                box-shadow:0px 3px 5px #515151;
            }
            .posi{
                position: relative;
            }
            .visible{
                display:block;
                            width:auto;
                        height:auto;
                        opacity:1;
            }
            @media screen and (max-width:767px){
                .menu li{
                    background-color: black;
                    width:100%;
                    text-align: left;
                    padding:15px 0;
                    padding-left:20px;
                    margin-left: 0px;
                    margin-right: 34px;
                    display:block;
                    border-bottom: none;
                }
                .menu ul{
                    position:absolute;
                    top:51px;
                    left:0px;
                    margin:0px;
                    padding:0px;
                    width:100%;
                    display: none;
                }
                button{
                    display: block;
                }
                .logo{
                    display:block;
                }
            }

            .main{
                float:left;
                width:100%;
                padding: 20px;
                box-sizing: border-box;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="menu posi fixed" data-sticky>
            <a href="index.html" rel="nofollow noopener noreferrer" target="_blank" class="logo">Logo</a>
            <ul>
                <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Item 1</a></li>
                <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Item 2</a></li>
                <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Item 3</a></li>
                <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Item 4</a></li>
                <li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Item 5</a></li>
            </ul>
            <button></button>
        </div>

        <div class="content">
            <div class="main">
                <h1>Titre</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu.</p>
                <div style="background-color:yellow;height:1000px"></div>
            </div>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!--<script type="text/javascript" src="fixed.js"></script>-->
        <script type="text/javascript">
            (function(){
                var ul= document.querySelector('ul')
                var button= document.querySelector('button')
                button.addEventListener('click',function(){
                    ul.classList.toggle('visible')
                })
            })()
        </script>
    </body>
</html>



EDIT : Ajout des balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45




Utile
+1
plus moins
Salut,

Dans ton css, change la définition de la classe ".visible" en ".menu ul.visible".

Plus d'info : http://blog.organicweb.fr/comprendre-le-poids-des-regles-css

Bonne journée,
Cette réponse vous a-t-elle aidé ?  
Donnez votre avis
Utile
+0
plus moins
Bonjour

Qu'est-ce qui ne fonctionne pas au juste ?
quelle parti exactement ?
Le html ?
Le CSS ?
Le javascript ? (si javascript .. y a t'il des erreurs dans la CONSOLE du navigateur ?? )

Donnez votre avis
Utile
+0
plus moins
C'est le javascript qui ne fonctionne pas
Il n'a pas d erreur dans la console
C'est quand je redimensionne la fenetre en dessous de 767px le ul passe en display:none et j'aimerai pouvoir le déplier en appuyant sur le bouton. Pour cela j ajoute la classe visible au ul en js. Mais cela n'a aucun effet
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 10 août 2017 à 11:45
pas d'erreur dans la console ??? Oo
Pourtant... il semble manquer les ";" à la fin de tes lignes JS ...
Commence par corriger ça et reposte nous le code (JAVASCRIPT UNIQUEMENT ) modifié.

NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Répondre
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 10 août 2017 à 11:47
Et puis... vu que tu charges Jquery .. pourquoi ne pas écrire ton code en jquery directement au lieu de faire du "pure" javascript ??
Répondre
Donnez votre avis
Utile
+0
plus moins
(function(){
var ul= document.querySelector('ul');
var button= document.querySelector('button');
button.addEventListener('click',function(){
ul.classList.toggle('visible');
});
})();
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 10 août 2017 à 11:48
Essaye encore ......; après avoir lu ceci :
NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Répondre
Donnez votre avis
Utile
+0
plus moins
$("button").click(function(){
$("ul").toggleClass("visible");
});
jordane45 18469Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 21 octobre 2017 Dernière intervention - 10 août 2017 à 12:04
Aurais tu des petits soucis de lecture ?

MERCI DE POSTER TON CODE EN UTILISANT : LES BALISES DE CODE

(comme indiqué dans mes précédents messages.. comme celui-ci : http://www.commentcamarche.net/forum/affich-34782182-menu-responsive-perso#6 )
Répondre
Donnez votre avis
Utile
+0
plus moins
ok dsl j'avais pas vu


$("button").click(function(){
$("ul").toggleClass("visible");
});
Donnez votre avis
Utile
+0
plus moins
Donc je récapitule.
Ma fonction jquery ajoute et retire la classe visible a chaque clic.
Cela marche correctement. Je vois dans mon inspecteur que la classe est bien ajouté et retiré a chaque clic
Mais cela n'a aucun effet. Pourant mon css me semble correct
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !