Menu déroulant avec bootstrap

Version imprimable

Bonjour

J'ai inséré un bouton avec un menu déroulant mais lorsque je clique sur le bouton, la liste ne se déroule pas:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
 
<html>
 
<head>
   <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
 
<body>
<div class="btn-toolbar" role="toolbar" aria-label="groupe_boutons1">
  <div class="btn-group" role="group" aria-label="bouton1">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false">
       Menu déroulant
       <span class="caret"></span>
      </button>
        <ul class="dropdown-menu">
          <li><a href="#" title="Lien 1">lien 1</a></li>
          <li><a href="#" title="Lien 2">lien 2<s/a></li>
        </ul>
    </div>
  </div>
</div> 
</body>
 
</html>

Merci

Bonsoir, peux-tu nous montrer ton dossier avec tes fichiers? Pour voir si ton fichier est bien placé et si le lien vers ton fichier bootstrap s'applique bien ;)

Sur le site W3schools ils donnent cet exemple là :
Code:

1 2 3 4 5 6 7 8 9 <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>

19/12/2017, 19h31
Invité

Bonjour,

Bootstrap, ce n'est pas que du CSS.

Il manque le JS.

Documentation.
20/12/2017, 11h11
momjunior

Je pense que mon fichier Bootstrap est bien placé. En effet, le dossier bootstrap et index.html sont à la même racine. Ensuite mon dossier bootstrap contient le dossier css, et ce dernier contient le fichier bootstrap.css. En gros j'ai Bootstrap - css - bootstrap.css

Concernant le code que tu viens de me donner, ça veut dire que je peux avoir le menu déroulant sans utiliser du javascript ou jquery?
20/12/2017, 11h54
momjunior

En fait sur le tuto que j'ai vu, il ne mentionnait pas l'utilisation du JS pour avoir le menu déroulant. Donc j'avais des doutes.

Je vais donc intégrer le JS.

Merci

Sur le site de W3Wschool ils ont mis tout cela dans le head:

Code:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

donc effectivement il faut utiliser du java script* :)

20/12/2017, 15h10
Invité

Ne confonds pas Java et JavaScript.
Rien à voir.

Et va plutot voir sur le site officiel Bootstrap.
20/12/2017, 20h31
rizcolais

Je m'excuse j'abrège souvent le terme java script en java, une erreur de ma part...

Bon finalement quand je clique sur mon bouton,la liste apparait mais quand je clique sur les liens, ils ne marchent pas. J'ai pourtant bien mis les balises <a></a>.
Voici mon code:

index.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu <span class="caret"></span> </button> </div> <ul class="dropdown-menu" role="menu"> <li><a href="indexs.html">Accueil</a></li> <li><a href="index.html">A Propos</a></li> <li><a href="forum.html">La Galerie</a></li> <li><a href="contact.html">Cuisine D'Afrique</a></li> <li><a href="index.html">Contact</a></li> </ul>
menu.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $(function() { $(".btn-primary").click(function() { $('.dropdown-menu').css('display','inline'); }); $(".btn-primary").blur(function() { $('.dropdown-menu').css('display','none'); }); });
style.css

Code:

.dropdown-menu {display:none;list-style:none; background-color:dimgray; min-width: 71px; top:90%;}

Par défaut le menu déroulant est invisible (.dropdown-menu {display:none....etc), mais quand je définis le menu déroulant à visible par défaut, les liens marchent bien.

style.css

Code:

.dropdown-menu {display:inline;list-style:none; background-color:dimgray; min-width: 71px; top:90%;}

Donc on dirait que c'est le fait que le menu soit invisible par défaut qui rend mes liens inactifs.

28/02/2018, 10h09
momjunior
Ok je viens de voir l'erreur. Ca provient de la perte du focus au niveau du bouton menu:

menu.js
Code:

1 2 3 $(".btn-primary").blur(function() { $('.dropdown-menu').css('display','none'); });
En effet, quand je clique sur le bouton menu, le menu déroulant s'affiche, mais lorsque je clique sur un lien du menu, le bouton perd le focus, et c'est pourquoi mes liens ne marchent pas.

Donc comment faire en sorte que la perte de focus ne cache pas mon menu lorsque je clique sur le menu.
01/03/2018, 09h23
Invité
bonjour,

le clic se "propage" dans le DOM. Il faut le stopper : Event.stopPropagation()

Mais ce que je ne comprends pas, c'est pourquoi tu as besoin d'écrire du script jQuery sur ton menu, alors que Bootstrap.js * le gère très bien sans rien ajouter ? :koi:
- Bootstrap : Menus déroulants (Dropdowns menus)
[EDIT]* Vu le code de ton 1er post, tu N'as PAS intégré Bootstrap.js !

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Merci beaucoup. Tu viens de me donner 2 solutions.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(function() { $(".btn-primary").click(function() { $('.dropdown-menu').show('slow'); }); $(document).click(function() { $('.dropdown-menu').hide('slow'); }); $('.btn-primary').click(function(event){ event.stopPropagation(); }); });
Et concernant le 2e solution, effectivement j'avais oublié d'intégrer le bootstrap.js:

Code:

<script src="bootstrap/js/bootstrap.min.js"></script>

Merci

02/03/2018, 11h17
Invité

Ce n'est pas sur .btn-primary qu'il faut travailler, mais sur .dropdown-toggle !

Code:

$(".dropdown-toggle").click(function() {

btn-primary peut être utilisé sur n'importe quel bouton : (Boostrap button).

Tu devrais un peu lire la doc Boostrap.
Car là, tu fais du "bricolage"...

Ok je vois:
Code:

1 2 3 4 5 6 7 8 9 10 11 $(function() { $(".dropdown-toggle").click(function() { $('.dropdown-menu').show('slow'); }); $(document).click(function() { $('.dropdown-menu').hide('slow'); }); });
Oui t'as raison, je devrais lire quelques tutos pour bien le comprendre