Comment faire fonctionner ce dropdown menu ?

Fermé
LucasGrandviergne - 13 sept. 2019 à 12:33
 LucasGrandviergne - 13 sept. 2019 à 16:20
Bonjour, le bouton s'affiche mais pas le dropdown menu quand je clic dessus.

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
A voir également:

3 réponses

1Seb Messages postés 166 Date d'inscription dimanche 27 mars 2016 Statut Membre Dernière intervention 30 octobre 2021 37
13 sept. 2019 à 13:16
Bonjour,

Si je prends l'exemple Bootstrap ici : https://getbootstrap.com/docs/4.0/getting-started/introduction/
Donc :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>  	    	

<h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>


Chez moi le bouton fonctionne correctement.
0
LucasGrandviergne
13 sept. 2019 à 15:16

<!DOCTYPE html><code html>

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Unna&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/d7bbe59c76.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>



</body>

</html>
</code>
0
LucasGrandviergne
13 sept. 2019 à 15:17
Voici mon full code, ça ne fonctionne toujours pas, peut être un conflit entre mes <link> bootstrap dans le <head>
0
1Seb Messages postés 166 Date d'inscription dimanche 27 mars 2016 Statut Membre Dernière intervention 30 octobre 2021 37
13 sept. 2019 à 16:10
Oui, il manque le js !

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
0
LucasGrandviergne
13 sept. 2019 à 16:20
J'avais trouvé. Merci pour ton aide. J'ai créé une page d'entraide entre developer sur facebook "Developer community". Feel free to join
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
13 sept. 2019 à 13:20
Bonjour,

Il faut utiliser du CSS pour définir les class, puis, si tu veux faire un menu déroulant, il faut utiliser les balises <ul> et <li>.

0
LucasGrandviergne
13 sept. 2019 à 16:20
Merci pour ton aide. J'ai créé une page d'entraide entre developer sur facebook "Developer community". Feel free to join
0
telliak Messages postés 3667 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 4 novembre 2024 876
13 sept. 2019 à 13:56
Salut,
Un exemple au hasardparmi les 1 520 000 résultats de la recherche html menu déroulant dans Google...]
0
LucasGrandviergne
13 sept. 2019 à 16:20
Merci pour ton aide. J'ai créé une page d'entraide entre developer sur facebook "Developer community". Feel free to join :)
0