Sous-menu déroulant Bootstrap manquant

324

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

DevC
la source
2
Rappelez-vous que certains composants ont changé dans la version 3, y compris le menu, les navs et les modaux.
Deividi Cavarzan
11
l'absence de prise en charge native de cette fonctionnalité (imho) utile dans BS3 est l'une des principales raisons pour lesquelles je n'ai pas encore basculé. bien que je convienne que ce n'est pas aussi utile dans les mobiles, et qu'ils ont maintenant une approche 'mobile d'abord', il semble à courte vue de supprimer une fonctionnalité qu'ils ont déjà implémentée, qui est TRÈS utile sur le bureau
Andrew Brown
4
A convenu qu'il est à courte vue de supprimer les fonctionnalités attendues. Ce type de changement révolutionnaire donne aux développeurs d'entreprise une mauvaise journée.
RJB
Pour faire une liste déroulante, utilisez simplement css codepen.io/Gothburz/pen/GpJKqP
Gothburz

Réponses:

555

Mise à jour 2018

Le dropdown-submenua été supprimé dans Bootstrap 3 RC. Dans les mots de l'auteur Bootstrap Mark Otto ..

"Les sous-menus n'ont tout simplement pas beaucoup de place sur le Web en ce moment, en particulier le Web mobile. Ils seront supprimés avec 3.0" - https://github.com/twbs/bootstrap/pull/6342

Mais, avec un peu de CSS supplémentaire, vous pouvez obtenir les mêmes fonctionnalités.

Bootstrap 4 (sous-menu navbar en survol)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

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/71520

Voici un exemple qui utilise Bootstrap 3.0.0 (final): http://bootply.com/86684

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

Exemple de balisage

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

PS - Exemple dans la barre de navigation qui ajuste la position gauche: http://bootply.com/92442

Zim
la source
5
Oui, je l'ai ajouté à la feuille de style de mon thème, il suffit de copier-coller de l'ancienne version de bootstrap wordpress.org/themes/bikaner
DevC
8
Par exemple bootply.com/86684 , ajoutez la ligne suivante dans css pour un survol correct de l'arrière-plan de l'élément de menu parent lors de l'affichage du sous-menu: .dropdown-submenu:hover {background: #e2e1e1;}
Eduardo Moralles
1
Fonctionne également avec 3.1.1. Merci beaucoup pour la solution. Je me frappais la tête contre le mur en essayant de modifier le fichier bootstrap.js pour qu'il fonctionne correctement.
Joel Kinzel
2
Je cherche à simplifier les choses autant que possible, mais cela est nécessaire sur les grands sites Web sans aucun moyen de contourner plusieurs niveaux de navigation (tels que les sites Web gouvernementaux).
Troy Templeman
1
Le sous-menu disparaît avant même que je puisse y déplacer la souris, donc le survol ne fonctionne pas! Il ne plane pas, en s'appuyant sur le clic, cela fonctionne bien, cependant.
Polv
61

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:

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

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

Le résultat se trouve sur mon thème WordPress (Haut de page): http://shprinkone.julienrenaux.fr/

Shprink
la source
5
Vous êtes le gars le plus intelligent de ce post
user1143669
2
Cette solution ne tient pas compte du fait de vouloir conserver la fonctionnalité de survol sur le bureau et elle ne fonctionne pas non plus pour le deuxième niveau de sous-menu. Pour que cela fonctionne pour plus de niveaux de sous-menus, changez les deux dernières lignes en la ligne suivante:, $(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.
edhedges
merci pour votre code. mais dans le téléphone portable, votre code a un bug.
jian dan
42

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.

vee
la source
J'avais du mal à essayer de faire amorcer le bootstrap sur PC et à cliquer sur une tablette à plusieurs niveaux. Vous venez de faire ma journée! Fonctionne à merveille - Utilise à peu près le même balisage que le bootstrap. Je vous remercie! :)
Hippie
2
Cette solution est gratuite, open source et fonctionne très bien avec BootStrap 3.
Patrick Desjardins
5
Incroyable! Facile! Pour des détails spécifiques sur l'intégration de Bootstrap 3, voir ici: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
manafire
1
Les menus intelligents sont agréables, mais ils ne fonctionnent qu'avec des barres de navigation, pas avec de simples menus déroulants.
Nikolai Prokoschenko
1
vous avez enregistré mon projet :-)
Sikander
5

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:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: FROM background-color: #eeeeee TO background-color: # c5c5c5 - la police blanche et le fond clair ne semblaient pas bons.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

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.

WHOMEZz
la source
2

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

George Donev
la source
Ceci est une très bonne solution pour la liste déroulante à plusieurs niveaux, j'aime l'utiliser.
huncyrus
Je suis content que vous ayez aimé :-)
George Donev
-2

Je fais une autre solution pour le menu déroulant. J'espère que c'est utile Ajoutez simplement ce script js

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>
user3193801
la source