Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bootstrap Burger Menu

Sujet résolu
7 mars 2017 à 16:14:25

Bonjour,

Tout d'abord, veuillez m'excuser si je crée un doublon, je n'ai pas réussi à trouver mon problème...

Mon problème se situe au niveau d'un menu réalisé avec Bootstrap.

Le menu s'affiche bien et fonctionne lorsque l'écran est à la taille maximale. Toutefois, lorsque je réduis la taille de l'écran pour vérifier le responsiv, le menu change et passe en mode "burger menu", jusque là tout va bien.

Le problème est que lorsque je clique sur le burger menu, rien ne s'affiche, je pense qu'il s'agit probablement d'un problème liés aux imports, mais je n'arrive pas à trouver d'où cela pourrait venir...

Voici ce que j'ai fais, je vous remercie d'avance d'avoir pris le temps de me répondre !

Cordialement.

  • Partager sur Facebook
  • Partager sur Twitter
7 mars 2017 à 19:18:01

Bonjour,

si tu as bien reproduit le html proposé par Bootstrap, nul besoin d'ajouter ta fonction JS (les data-toggle et data-target s'en chargent). En revanche, vérifie bien que jQuery et les fichiers JS de Bootstrap sont bien chargés. Si tu regardes dans la console du navigateur (avec F12), vois-tu une erreur au chargement de la page ?

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

7 mars 2017 à 20:56:06

Bonsoir,

Il est bizarre ton "Form" et je comprend pas pourquoi tu l'a inclut dans ta balise "ul".

Je découvre juste Bootstrap mais il me semble qu'il faut déjà ouvrir une balise avec la class= "container".

Pour la balise "form", je l'a placerais après avoir refermer la balise "ul" et je mettrais un <input type="search" ...> et un <button class="btn btn-default" ...> ou une balise <a class="btn btn-default" ... > .

Ton code est très proche de celui vu dans le cour, reprend le en changeant juste les liens et pour la zone de recherche, fais un truc sympa avec du CSS en plus des class de bootstrap, par exemple comme ceci :

C'est pas très dur, je débute et j'y suis arrivé !!!

  • Partager sur Facebook
  • Partager sur Twitter
8 mars 2017 à 11:00:30

Bonjour,

Effectivement je pourrais changer la barre de recherche, ce n'est qu'un détail.

Mais le problème est lorsque je clique sur le burger menu, les items du menu ne s'affiche pas, j'ai vérifier via le débogueur, aucun message d'erreur..

Je n'arrive pas à trouver pourquoi cela ne s'affiche pas...

  • Partager sur Facebook
  • Partager sur Twitter
9 mars 2017 à 0:01:26

Bonsoir,

J'ai tester ta partie <form> (et juste cette partie, pas envie de tout recopier !!!)  dans une de mes navbar, pas de problème, ça fonctionne bien que j'aurai plutôt fait ainsi :

<li>
   <form>
       <input
       <input
   </form>
</li>


mais aucun souci, dans les deux cas, tout apparaît dans le burger ....

Je pense qu'il faudrait rajouter ce code entre ta dernière balise fermante </div> et </body> :

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Javascript de Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Et tu peux virer ton script, il sert à rien !!

Ah, aussi, un détail, mets ton code en le copiant / collant, il y a le bouton "code" pour cela, pour pouvoir tester et trouver pourquoi ça ne fonctionne pas, c'est plus cool pour nous ...

-
Edité par florianboy01 9 mars 2017 à 0:02:35

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2017 à 9:17:19

Désolé je pensais que ma réponse avait été publié mais visiblement non...
Merci pour votre aide, en effet ça venait de mes imports JQuery...

Cordialement.

  • Partager sur Facebook
  • Partager sur Twitter
19 avril 2017 à 20:13:07

Donc c'est résolu ? Pense à marquer ton sujet comme tel, alors (tu as un bouton pour ça en haut à droite) :)

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

20 avril 2017 à 14:17:06

Merci, je ne connaissais pas ce bouton !
  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2020 à 18:48:14

Bonjour, je deterre le sujet car j'ai exactement le même soucis et je n'ai pas bien compris comment le résoudre

J'attends vos réponses avec impatience

Cordialement, 

Le galérien 😜

  • Partager sur Facebook
  • Partager sur Twitter
18 mars 2020 à 23:34:56

Bonjour,

soit tu as exactement le même problème, et comme le sujet est résolu, la solution s'y trouve. Soit tu n'as pas exactement le même problème (ne serait-ce que parce que Bootstrap a beaucoup évolué en 3 ans), et donc inutile de remonter un vieux sujet (d'autant que beaucoup de gens ne lisent que le premier post et ne vont pas comprendre qu'il s'agit d'une autre histoire).

Crée un nouveau sujet dédié, avec ton code coloré avec le bouton </> de la barre d'outils du forum et une explication précise.

Je ferme ici.

-
Edité par Lamecarlate 18 mars 2020 à 23:35:46

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)