Menu responsive perso [Résolu/Fermé]

Signaler
-
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
-
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




7 réponses

Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
445
Salut,

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

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

Bonne journée,
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
32470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 486
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 ?? )

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
Messages postés
32470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 486
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 : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Messages postés
32470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 486
Et puis... vu que tu charges Jquery .. pourquoi ne pas écrire ton code en jquery directement au lieu de faire du "pure" javascript ??
(function(){
var ul= document.querySelector('ul');
var button= document.querySelector('button');
button.addEventListener('click',function(){
ul.classList.toggle('visible');
});
})();
Messages postés
32470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 486
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 : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
$("button").click(function(){
$("ul").toggleClass("visible");
});
Messages postés
32470
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 486
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 : https://forums.commentcamarche.net/forum/affich-34782182-menu-responsive-perso#6 )
ok dsl j'avais pas vu


$("button").click(function(){
$("ul").toggleClass("visible");
});
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