Bootstrap 3 est toujours à RC, mais j'essayais juste de l'implémenter. Je ne pouvais pas comprendre comment mettre une classe de sous-menu. Même il n'y a pas de classe en CSS et même les nouveaux documents n'en disent rien
Il était là dans 2.x avec le nom de la classe sous-menu déroulant
Réponses:
Mise à jour 2018
Le
dropdown-submenu
a été supprimé dans Bootstrap 3 RC. Dans les mots de l'auteur Bootstrap Mark Otto ..Mais, avec un peu de CSS supplémentaire, vous pouvez obtenir les mêmes fonctionnalités.
Bootstrap 4 (sous-menu navbar en survol)
Survol du menu déroulant du sous-menu Navbar
Survol du menu déroulant du sous-menu Navbar (aligné à droite)
Cliquez sur le menu déroulant du sous-menu Navbar (aligné à droite)
Survol du menu déroulant Navbar (aucun sous-menu)
Bootstrap 3
Voici un exemple qui utilise 3.0 RC 1: http://bootply.com/71520Voici un exemple qui utilise Bootstrap 3.0.0 (final): http://bootply.com/86684
CSS
Exemple de balisage
PS - Exemple dans la barre de navigation qui ajuste la position gauche: http://bootply.com/92442
la source
.dropdown-submenu:hover {background: #e2e1e1;}
La solution @skelly est bonne mais ne fonctionnera pas sur les appareils mobiles car l'état de vol stationnaire ne fonctionnera pas.
J'ai ajouté un peu de JS pour récupérer le comportement BS 2.3.2.
PS: cela fonctionnera avec le CSS que vous y obtenez: http://bootply.com/71520 mais vous pouvez commenter la partie suivante:
CSS:
JS:
Le résultat se trouve sur mon thème WordPress (Haut de page): http://shprinkone.julienrenaux.fr/
la source
$(this).closest(".dropdown-submenu").toggleClass("open");
qui ouvrira / fermera les éléments du menu de liens. Afin de garder le survol sur le bureau, une vérification de la largeur de la fenêtre du navigateur est nécessaire et diffère pour chaque site.Jusqu'à aujourd'hui (9 janvier 2014), Bootstrap 3 ne prend toujours pas en charge la liste déroulante des sous-menus.
J'ai cherché sur Google à propos du menu de navigation réactif et j'ai trouvé que c'était le meilleur que je puisse faire.
Ce sont des menus intelligents http://www.smartmenus.org/
J'espère que c'est la sortie pour tous ceux qui veulent un menu de navigation avec un sous-menu à plusieurs niveaux.
mise à jour 2015-02-17 Les menus intelligents prennent désormais entièrement en charge le style d'élément Bootstrap pour le sous-menu. Pour plus d'informations, veuillez consulter le site Web des menus intelligents.
la source
Le code de Shprink m'a le plus aidé, mais pour éviter la liste déroulante de sortir de l'écran, je l'ai mis à jour pour:
JS:
CSS: FROM background-color: #eeeeee TO background-color: # c5c5c5 - la police blanche et le fond clair ne semblaient pas bons.
J'espère que cela aide les gens autant que pour moi!
Mais j'espère que Bootstrap ajoutera la fonctionnalité subs dès que possible.
la source
Commentez la solution de contournement vraiment utile de Skelly : dans Bootstrap-sass 3.3.6, utilities.scss, ligne 19:
.pull-left
afloat:left !important
. Depuis, je recommande également d'utiliser! Important dans son CSS:la source
J'ai rencontré ce problème il y a quelques jours. J'ai essayé de nombreuses solutions et aucune n'a vraiment fonctionné pour moi à la fin, j'ai fini par créer une extension / substitution du code déroulant du bootstrap. Il s'agit d'une copie du code d'origine avec des modifications de la fonction closeMenus.
Je pense que c'est une bonne solution car elle n'affecte pas les classes de base de bootstrap js.
Vous pouvez le vérifier sur gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown
la source
Je fais une autre solution pour le menu déroulant. J'espère que c'est utile Ajoutez simplement ce script js
la source