Le sous-menu déroulant de Bootstrap est manquant

Question

Bootstrap 3 est toujours en RC, mais j'essayais juste de l'implémenter. Je n'ai pas réussi à trouver comment mettre une classe de sous-menu. Il n'y a pas de classe en css et même la nouvelle documentation ne dit rien à ce sujet.

Il était présent dans la version 2.x avec le nom de classe dropdown-submenu.

Answer 1

Bootstrap 5 (mise à jour 2021)

Ajoutez du JavaScript pour empêcher la fermeture du sous-menu lorsque la liste déroulante parent est ouverte. Cela peut se faire par le biais d'un Toggle display:block ...

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd)=>{
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling
        el.style.display = el.style.display==='block'?'none':'block'
    })
})

Bootstrap 5 Multi-level Dropdown - cliquer
Dropdown multi-niveaux Bootstrap 5 - survol

Ou bien, vous pouvez utiliser cette méthode CSS uniquement pour les menus déroulants de la barre de navigation...

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

Bootstrap 5 Navbar Dropdown Hover Submenus (CSS uniquement)

---

Bootstrap 4 (mise à jour 2018)

El dropdown-submenu a été supprimé dans Bootstrap 3 RC. Selon l'auteur de Bootstrap, Mark Otto

"Les sous-menus n'ont pas vraiment leur place sur le web actuellement, en particulier sur le web mobile. Ils seront supprimés avec la version 3.0". https://github.com/twbs/bootstrap/pull/6342

Mais, avec un peu de CSS supplémentaire, vous pouvez obtenir la même fonctionnalité.

le sous-menu de la barre de navigation au 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 de la barre de navigation
survol du menu déroulant de la barre de navigation (aligné à droite)
Clic sur le menu déroulant de la barre de navigation (aligné à droite)
survol du menu déroulant de la barre de navigation (sans sous-menu)

---

Bootstrap 3

Voici un exemple qui utilise la version 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>

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

Answer 2

La solution de @skelly est bonne mais ne fonctionnera pas sur les appareils mobiles car l'état de survol ne fonctionnera pas.

J'ai ajouté un peu de JS pour retrouver le comportement de BS 2.3.2.

PS : cela fonctionnera avec le CSS que vous obtiendrez là-bas : 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 (en haut de la page) : http://shprinkone.julienrenaux.fr/

Answer 3

Jusqu'à aujourd'hui (9 jan 2014) le Bootstrap 3 ne supporte toujours pas le sous-menu déroulant.

J'ai fait des recherches sur Google à propos du menu de navigation réactif et j'ai trouvé que c'était le meilleur que j'ai trouvé.

Il est Menus intelligents http://www.smartmenus.org/

J'espère que c'est la solution pour tous ceux qui veulent un menu de navigation avec un sous-menu à plusieurs niveaux.

mise à jour 2015-02-17 Les menus intelligents supportent désormais entièrement le style d'élément Bootstrap pour le sous-menu. Pour plus d'informations, veuillez consulter le site web des menus intelligents.

Answer 4

Le code de Shprink m'a le plus aidé, mais pour éviter que la liste déroulante ne disparaisse de l'écran, je l'ai mis à jour :

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 n'avaient pas l'air bien.

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

J'espère que cela aidera les gens autant que cela l'a fait pour moi !

Mais j'espère que Bootstrap réintroduira la fonctionnalité des sous-titres dès que possible.

Answer 5

Je me suis heurté à ce problème il y a quelques jours. J'ai essayé de nombreuses solutions mais aucune n'a vraiment fonctionné pour moi. J'ai fini par créer une extension/override du code de la liste déroulante de bootstrap. C'est une copie du code original avec des changements à 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 consulter sur gihub : https://github.com/djokodonev/bootstrap-multilevel-dropdown