web-dev-qa-db-fra.com

Comment ouvrir un menu déroulant en survol dans Bootstrap 4

À l'heure actuelle, mon menu déroulant de navigation peut s'ouvrir en un clic. 

Je veux qu'il s'ouvre en vol stationnaire. Comment puis-je faire cela?

htmlcssbootstrap-4
5
Owais Idrees

ajoutez simplement les css suivants

.dropdown:hover>.dropdown-menu {
 display: block;
}

violon

.dropdown:hover>.dropdown-menu {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
 
<ul class="navbar-nav">

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <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>
  </li>
</ul>
</nav>

10
Znaneswar

Le css de Znaneswar fonctionne très bien, mais j’ajouterais aussi cette ligne.

.dropdown-menu {
  margin: -0.125rem 0 0;
}

La liste déroulante est espacée de 0,125 rem de l'élément qui la génère. Vous aurez donc de la difficulté à naviguer du lien au menu déroulant sans qu'il disparaisse lorsque vous survolez cet espace.

Et si vous souhaitez que le lien déroulant soit également un lien, supprimez cet attribut de la balise a

data-toggle="dropdown"
5
Strangegroove

Ci-dessous css fonctionne bien

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;   // Add this, to prevent clicking dropdown's default click function
}
4
Xahed Kamal
<div class="dropdown">
...
</div>

Vous pouvez essayer ceci avec jQuery:

$(".dropdown").hover(function(){
$(this).addClass("show");
});
0
tigigti