[Résolu] Bouton d'affichage d'un menu responsive

Bonjour,

A l’aide de JQuery j’ai mis en place un menu (ul#menu) responsive.
Quand la largeur de l’écran d’affichage passe sous 480px un bouton (button#b1) « Menu » s’affiche, le cliquage sur ce bouton affiche ou fait disparaître le menu (ul#menu).
Toutefois par défaut le menu s’affiche et je souhaiterai qu’il ne s’affiche pas.
Je n’arrive pas à développer le JS nécessaire ou à modifier le JS utilisé.

Merci pour votre aide.
Cordialement
Patrick MARA

@media screen and (min-width: 480px) {   
   button#b1 {
      display: none;
	}
}

<!--On inclut la librairie jQuery-->
<script src='jquery-3.2.1.js'></script>
<!--On écrit notre code JavaScript / jQuery-->
<script>
            $(document).ready(function(){
                $('#b1').click(function(){
                    $('ul#menu').toggle();
                });
            });
 </script>

pmara a écrit :

...
Toutefois par défaut le menu s’affiche et je souhaiterai qu’il ne s’affiche pas.
...

@media screen and (min-width: 480px) {   
   button#b1 {
      display: none;
	}
}

            $(document).ready(function(){
                $('#b1').click(function(){
                    $('ul#menu').toggle();
                });
            });

Sans code html associé....

Relis ce que je viens de te citer, et essaie de comprendre d'où ton erreur semble provenir. Mais comme j'ai écris ci-dessus :

a écrit :
Sans code html associé....

Bonjour,

Merci pour votre réponse mais sa relecture ne m'apporte pas la compréhension attendue.
Ceci dit je ne suis pas un grand spécialiste du javascript, pour lequel je pioche sur la toile la plupart du temps

Cordialement
Patrick MARA

pmara a écrit :

Toutefois par défaut le menu s’affiche et je souhaiterai qu’il ne s’affiche pas.

Par défaut par rapport à quoi ? au passage du 480px ? à l'affichage du site > 480px ? < ?

Donc si je comprend bien :

@media screen and (max-width: 480px) {   
   ul#menu {
      display: none;
	}
}

Modifié par JENCAL (22 Jan 2018 - 16:19)