Partage

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.

Staff 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 ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
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é !!!

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...

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

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.

Staff 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) :)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
20 avril 2017 à 14:17:06

Merci, je ne connaissais pas ce bouton !

Bootstrap Burger Menu

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown