Menu déroulant à plusieurs niveaux de Twitter Bootstrap

Est-il possible d'avoir un menu déroulant à plusieurs niveaux en utilisant les éléments de Twitter Bootstrap 2? La version originale n'a pas cette fonctionnalité.

Réponse mise à jour

^{* Réponse mise à jour prenant en charge la feuille de style de la version bootstrap v2.1.1 **.}

^{** Mais attention car cette solution a été supprimée de la v3}

Je voulais juste souligner que cette solution n'est plus nécessaire car le dernier bootstrap prend désormais en charge les listes déroulantes à plusieurs niveaux par défaut. Vous pouvez toujours l'utiliser si vous utilisez des versions plus anciennes, mais pour ceux qui ont mis à jour vers la dernière (v2.1.1 au moment de la rédaction), ce n'est plus nécessaire. Voici un violon avec la liste déroulante à plusieurs niveaux par défaut mise à jour directement à partir de la documentation:

http://jsfiddle.net/2Smgv/2858/

Réponse originale

Des problèmes ont été soulevés concernant la prise en charge des sous-menus sur github et ils sont généralement fermés par les développeurs de bootstrap, comme celui-ci , donc je pense que c'est aux développeurs qui utilisent le bootstrap de trouver quelque chose. Voici une démo que j'ai préparée pour vous montrer comment pirater un sous-menu fonctionnel.

Code pertinent

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

J'ai créé ma propre .sub-menuclasse à appliquer aux menus déroulants à 2 niveaux, de cette façon nous pouvons les positionner à côté de nos éléments de menu. Également modifié la flèche pour l'afficher à gauche du groupe de sous-menus.

Démo

[Twitter Bootstrap v3]

Pour créer un menu déroulant à n niveaux (compatible avec les appareils tactiles) dans Twitter Bootstrap v3,

• jsfiddle-demo du menu déroulant n-level v3.0.0 | v3.1.1 | v3.3.0

CSS:

.dropdown-menu>li /* To prevent selection of text */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu 
{
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JQuery:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

HTML:

<div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a class="trigger right-caret">Level 1</a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Level 2</a></li>
                <li>
                    <a class="trigger right-caret">Level 2</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li>
                            <a class="trigger right-caret">Level 3</a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>

Cet exemple provient de http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Fonctionne pour moi dans Bootstrap v3.1.1.

HTML

<div class="container">
<div class="row">
    <h2>Multi level dropdown menu in Bootstrap 3</h2>
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
    </div>
</div>

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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.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;
}

J'ai pu corriger le sous-menu toujours épinglé en haut du menu parent à partir de la réponse d'Andres avec l'ajout suivant:

.dropdown-menu li {
    position: relative;
}

J'ajoute également une icône "icon-chevron-right" sur les éléments qui contiennent des sous-menus de menu, et change l'icône du noir au blanc en survol (pour compléter le texte en passant au blanc et mieux paraître avec le fond bleu sélectionné).

Voici le changement complet de less / css (remplacez ce qui précède par ceci):

.dropdown-menu li {
    position: relative;

    [class^="icon-"] {
        float: right;
    }

    &:hover {
        // Switch to white icons on hover
        [class^="icon-"] {
            background-image: url("../img/glyphicons-halflings-white.png");
        }
    }
}

Je viens d'ajouter class="span2"aux <li>éléments de liste déroulante et cela a fonctionné.

Puisque Bootstrap 3 a supprimé la partie sous-menu et que nous devons nous adapter le style, je pense qu'il est préférable d'utiliser SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

Cela nous ferait gagner du temps sur la réactivité et le style mobiles.

Ce plugin également très prometteur.