Menu responsive perso [Résolu]

Garig - 10 août 2017 à 10:21 - Dernière réponse : Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention
- 10 août 2017 à 12:20
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




Afficher la suite 

11 réponses

Répondre au sujet
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 10 août 2017 à 12:20
+1
Utile
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é ?  
Commenter la réponse de Pitet
jordane45 19256 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 15 décembre 2017 Dernière intervention - 10 août 2017 à 11:35
0
Utile
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 ?? )

Commenter la réponse de jordane45
0
Utile
2
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 19256 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 15 décembre 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
jordane45 19256 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 15 décembre 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 ??
Commenter la réponse de Garig
0
Utile
1
(function(){
var ul= document.querySelector('ul');
var button= document.querySelector('button');
button.addEventListener('click',function(){
ul.classList.toggle('visible');
});
})();
jordane45 19256 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 15 décembre 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
Commenter la réponse de Garig
0
Utile
1
$("button").click(function(){
$("ul").toggleClass("visible");
});
jordane45 19256 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 15 décembre 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 )
Commenter la réponse de Garig
0
Utile
ok dsl j'avais pas vu


$("button").click(function(){
$("ul").toggleClass("visible");
});
Commenter la réponse de Garig
0
Utile
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
Commenter la réponse de Garig