Sujet Précédent Sujet Suivant

Menu responsive perso

Résolu/Fermé
Garig - Modifié le 10 août 2017 à 11:35
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 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




A voir également:

7 réponses

Réponse 1 / 7
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 août 2017 à 12:20
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
Réponse 2 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 août 2017 à 11:35
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 ?? )

0
Réponse 3 / 7
Garig
10 août 2017 à 11:43
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
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 ??
0
Réponse 4 / 7
Garig
10 août 2017 à 11:47
(function(){
var ul= document.querySelector('ul');
var button= document.querySelector('button');
button.addEventListener('click',function(){
ul.classList.toggle('visible');
});
})();
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Garig
10 août 2017 à 11:58
$("button").click(function(){
$("ul").toggleClass("visible");
});
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 : https://forums.commentcamarche.net/forum/affich-34782182-menu-responsive-perso#6 )
0
Réponse 6 / 7
Garig
10 août 2017 à 12:06
ok dsl j'avais pas vu 


$("button").click(function(){
$("ul").toggleClass("visible");
});
0
Réponse 7 / 7
Garig
10 août 2017 à 12:13
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
0

Discussions similaires

Sticker "ajout perso" indisponible sur mon compte instagram
Dancereamer -
Fl0 -

16 réponses
cherche logiciel de décoration à partir photo
mitch2 -
The Braveheart -

4 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses