web-dev-qa-db-fra.com

Bootstrap sous-menu déroulant manquant

Bootstrap 3 est toujours en RC, mais j'essayais juste de l'implémenter. Je n'arrivais pas à comprendre comment mettre une classe de sous-menu. Même s'il n'y a pas de cours en CSS et même les nouveaux documents ne disent rien à ce sujet

C'était là en 2.x avec le nom de la classe comme sous-menu déroulant

csstwitter-bootstraptwitter-bootstrap-3submenu
310
DevC

Mis à jour en 2018

Le dropdown-submenu a été supprimé de Bootstrap 3 RC. Dans les mots de Bootstrap auteur Mark Otto ..

"Les sous-menus n'ont pas beaucoup de place sur le Web pour le moment, en particulier 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 les mêmes fonctionnalités.

Bootstrap 4 (sous-menu de la barre de navigation 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 sous-menu de la barre de navigation
survol du sous-menu de la barre de navigation (aligné à droite)
menu déroulant du sous-menu Navbar (aligné à droite)
survol de la barre de navigation (pas de sous-menu)

Bootstrap 3

Voici un exemple utilisant la version 3.0 RC 1: http://bootply.com/7152

Voici un exemple d'utilisation de 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 marquage 

<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 de gauche: http://bootply.com/92442

533
Zim

La solution @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 récupérer le comportement de BS 2.3.2.

PS: cela fonctionnera avec le CSS que vous obtenez ici: http://bootply.com/7152 bien que vous puissiez 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 (début de page): http://shprinkone.julienrenaux.fr/

61
Shprink

Jusqu'à aujourd'hui (9 janvier 2014), le Bootstrap 3 ne prend toujours pas en charge le menu déroulant du sous-menu.

J'ai cherché sur Google à propos du menu de navigation responsive et j'ai trouvé que c'était le meilleur.

C’est des menus intelligents http://www.smartmenus.org/

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

mise à jour 2015-02-17 Les menus intelligents prennent désormais pleinement en charge le style d'élément Bootstrap pour le sous-menu. Pour plus d'informations, veuillez consulter le site Web Smart menus.

42
vee

Le code de Shprink m'a le plus aidé, mais pour éviter le menu déroulant et 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 l’arrière-plan 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 fonction de sous-marin le plus rapidement possible.

5
WHOMEZz

Commentez la solution de Skelly est vraiment utile : dans Bootstrap-sass 3.3.6, utilities.scss, ligne 19: .pull-left a float:left !important. Depuis, je recommande également d'utiliser! Important dans son CSS:

.dropdown-submenu.pull-left {
    float:none !important;
}
4
bencergazda

J'ai heurté ce problème il y a quelques jours. J'ai essayé beaucoup de solutions et aucune n'a vraiment fonctionné pour moi à la fin j'ai fini par créer une extension/substitution du code déroulant de bootstrap. C'est une copie du code original avec les modifications apportées à la fonction closeMenus.

Je pense que c'est une bonne solution car cela n'affecte pas les classes principales de bootstrap js.

Vous pouvez le vérifier sur gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

2
George Donev