Bootstrap liste Déroulante avec Hover
OK, donc ce que j'ai besoin est assez simple.
J'ai mis en place une barre de navigation avec quelques menus déroulants dans (à l'aide de class="dropdown-toggle" data-toggle="dropdown"
), et il fonctionne très bien.
Le truc, c'est qu'il fonctionne "onClick
", alors que je préférerais, si cela a fonctionné "onHover
".
Est-il intégré dans la façon de le faire?
- Voir mes nouvellement publiés bon plugin qui empêche les questions ci-dessous CSS et js solutions: github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
- Voir: stackoverflow.com/a/54288830/7186739
Vous devez vous connecter pour publier un commentaire.
La solution la plus simple serait en CSS. Ajouter quelque chose comme...
Travail De Violon
data-toggle
attribut de prendre le parent de l'élément, cliquez sur-mesure...il suffit de regarder pour les dommages collatéraux sur les écrans des mobiles.margin-top: 0;
à la même css fera le menu déroulant séjour lorsque vous déplacez votre souris au-dessus.@media only screen and (min-width:480px){ .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } }
.dropdown:hover .dropdown-menu, .dropup:hover .dropdown-menu
top de faire travailler les dropup menu aussi 🙂La meilleure façon de faire c'est de le déclencheur démarre, cliquez sur événement avec un hover. De cette façon, il devrait tout de même rester touch-friendly
Vous pouvez utiliser du jQuery passez fonction.
Vous suffit d'ajouter la classe
open
lorsque la souris entre dans et de supprimer la classe lorsque la souris quitte le menu déroulant.Voici mon code:
show
au lieu deopen
, et comprennent également ladropdown-menu
:$('.dropdown').hover(function() { $(this).addClass('show'); $(this).find('.dropdown-menu').addClass('show');}, function() {$(this).removeClass('show'); $(this).find('.dropdown-menu').removeClass('show');});
(Désolé pour la mise en forme.)Un moyen facile, à l'aide de jQuery, c'est ceci:
.first()
-$(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);
...Pour CSS il devient fou lorsque vous cliquez sur elle. C'est le code que j'utilise, elle aussi, ne pas changer quoi que ce soit pour l'affichage mobile.
Dans Twitter Bootstrap n'est pas mis en œuvre mais vous pouvez utiliser le ce plugin
Mise à jour 1:
Sames question ici
Passez la souris sur la valeur liquidative des éléments pour qu'ils s'activer sur le vol stationnaire.
http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
Donc, vous avez ce code:
Normalement il fonctionne sur un événement de clic, et vous voulez travailler sur le vol stationnaire de l'événement. C'est très simple, il suffit d'utiliser ce code javascript/jquery code:
Cela fonctionne très bien et voici l'explication: nous avons un bouton et un menu. Quand on survole le bouton de nous afficher le menu, et quand nous mouseout du bouton de nous masquer le menu après 100ms. Si vous vous demandez pourquoi je l'utiliser, c'est parce que vous avez besoin de temps pour faire glisser le curseur à partir du bouton sur le menu. Lorsque vous êtes sur le menu, le temps est remis à zéro et vous pouvez y rester autant de temps que vous le souhaitez. Lorsque vous quittez le menu, nous allons masquer le menu instantanément sans aucun délai d'attente.
J'ai utilisé ce code dans de nombreux projets, si vous rencontrez un problème à l'utiliser, n'hésitez pas à me poser des questions.
C'est ce que j'utilise pour faire déroulant sur le vol stationnaire avec certains jQuery
Essayer cette utilisation stationnaire de la fonction avec le fadein fadeout animations
Cela vous aidera à faire votre propre hover classe de bootstrap:
CSS:
Marges sont définies à éviter les proches, et ils sont en option.
HTML:
N'oubliez pas de retirer le bouton de l'attribut data-toggle="dropdown" si vous souhaitez supprimer onclick ouvrir, et ce sera également le travail quand l'entrée est ajouter à liste déroulante.
Cela ne plane de la barre de navigation lorsque vous n'êtes pas sur un appareil mobile, parce que je trouve que le curseur de la navigation ne fonctionne pas bien sur mobile divices:
J'ai essayer d'autres solutions, je suis en utilisant bootstrap 3, mais le menu déroulant ferme trop rapidement pour passer
supposé que vous ajoutez class="dropdown" à li, j'ai ajouté un délai d'attente
Mis à jour avec un bon plugin
J'ai publié un plugin adéquat pour déroulante passez la fonctionnalité, dans lequel vous pouvez même définir ce qui se passe lorsque vous cliquez sur le
dropdown-toggle
élément:https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Pourquoi je l'ai fait, quand il y a de nombreuses solutions déjà?
J'ai eu des problèmes avec toutes les précédentes solutions existantes. Le CSS simples ne le sont pas à l'aide de la
.open
classe sur le.dropdown
, donc il n'y aura pas de retour sur la liste déroulante de la bascule de l'élément lorsque le menu est visible.La js sont interférant avec cliquant sur
.dropdown-toggle
, de sorte que le menu déroulant s'affiche sur le vol stationnaire, puis il la cache en cliquant sur ouvrir un menu déroulant, et en déplaçant la souris déclenchera la liste déroulante pour afficher de nouveau. Certains de la js solutions sont de freinage compatibilité iOS, certains plugins ne fonctionnent pas sur les navigateurs de bureau moderne, qui soutiennent les événements tactiles.C'est pourquoi j'ai pris la Bootstrap Déroulant Hover plugin qui empêche toutes ces questions en utilisant uniquement le standard de l'API javascript de Bootstrap, sans hack.
Le déclenchement d'une
click
de l'événement avec unhover
a une petite erreur. Simouse-in
et puis unclick
crée vice-versa effet. Ilopens
quandmouse-out
etclose
quandmouse-in
. Une meilleure solution:html
jquery
codepen
La solution que je propose détecte si ses pas toucher l'appareil et que le
navbar-toggle
(hamburger menu) n'est pas visible et rend le parent de l'élément de menu révélant sous-menu sur le vol stationnaire et et suivre son lien sur cliquez sur.Rend également tne margin-top 0 parce que l'écart entre la barre de navigation et le menu dans certains navigateur ne vous permettra pas de hover pour les sous-éléments
JS:
HTML:
JS:
HTML:
Bootstrap déroulante de Travail sur le vol stationnaire, et de rester proche de clic en ajoutant la propriété display:block; en css et de suppression de ces attributs data-toggle="dropdown" role="button" de balise button
CSS:
HTML: