[RESOLU] Menu dropdown et bootstrap

Eléphanteau du PHP | 26 Messages

11 juin 2022, 14:57

Bonjour,

j'ai réalisé un menu déroulant avec CSS qui utilise Dropdown

à partir de : https://www.w3schools.com/howto/howto_css_dropdown.asp

Cela marchait très bien, jusqu'au moment où j'ai voulu ajouter bootstrap sur mon site.

En ajouter le CSS bootstrap.min.css

Mon menu n'apparait plus au survol.


J'ai regardé dans le css de bootstrap, et il y a effectivement des info concernant dropdown, mais c'est un peu complexe pour moi, est-ce que quelqu'un a déjà rencontré un problème de ce type, et peut me donner une piste ?

Partie de code :

CSS du menu

Code : Tout sélectionner

.topnav { background-color: #CFCFC9; overflow: hidden; } .topnav a { float: left; display: block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav .active { background-color: #7A7A6D; color: black; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:target, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 800px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 800px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }

Html du menu

Code : Tout sélectionner

<div class="topnav" id="myTopnav"> <a href="/" class="active">Accueil</a> <div class="dropdown"> <button class="dropbtn">VOS CREATIONS <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="poemetri.php?cat=pl&choix=tous&tri=datepoeme&debut=0"><img src="images/poesielibremini.jpg" alt="Poésie libre mini" border="0" height="15px" align="absmiddle"> Poésie libre</a> <a href="poemetri.php?cat=tdm&choix=tous&tri=datepoeme&debut=0"><img src="images/themedumoismini.jpg" alt="Thème du mois mini" border="0" height="15px" align="absmiddle"> Thème du mois</a> <a href="tableautri.php?galerie=gda&choix=tous&debut=0&tri=datetableau"><img src="images/gdamini.jpg" alt="Galerie d'art mini" border="0" height="15px" align="absmiddle"> Galerie d'art magique</a> <a href="podcasttri.php"><img src="images/podcastmini.jpg" alt="Podcast mini" border="0" height="15px" align="absmiddle"> Podcast audio/vidéo</a> <a href="livrecdtri.php"><img src="images/livrecdmini.jpg" alt="Livre cd mini" border="0" height="15px" align="absmiddle"> Livre/CD des membres</a> </div> </div> </div>

Merci d'avance

Eric

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9350 Messages

13 juin 2022, 09:25

Peut-être qu'il y a un conflit dans le nom de tes class.
Ma préconisation serait d'utiliser des noms de class moins générique, par exemple en les prefixant avec le nom de ton site, càd remplacer "dropdown" par "monsite-dropdown"
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 26 Messages

13 juin 2022, 15:33

J'avais essayé, mais ça n'avait pas fonctionné,
j'avais du faire une erreur, car en retentant l'expérience, l'issue est positive, merci.