Menu responsive perso

Résolu
Garig -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   527
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
(function(){
var ul= document.querySelector('ul');
var button= document.querySelector('button');
button.addEventListener('click',function(){
ul.classList.toggle('visible');
});
})();
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
$("button").click(function(){
$("ul").toggleClass("visible");
});
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
ok dsl j'avais pas vu 


$("button").click(function(){
$("ul").toggleClass("visible");
});
0
Réponse 7 / 7
Garig
 
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

menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
Activer le bluetooth sur smart TV Samsung
Odayakana -
callens -

4 réponses