Menú desplegable de múltiples niveles de Twitter Bootstrap

¿Es posible tener un menú desplegable de múltiples niveles usando los elementos de twitter bootstrap 2? La versión original no tiene esta característica.

Respuesta actualizada

* Respuesta actualizada que admite la versión de la versión de arranque v2.1.1 **.

** Pero tenga cuidado porque esta solución se ha eliminado de v3

Solo quería señalar que esta solución ya no es necesaria, ya que el último arranque ahora es compatible con los menús desplegables de varios niveles por defecto. Todavía puede usarlo si está en versiones anteriores pero para aquellos que se actualizaron a la última versión (v2.1.1 en el momento de la redacción) ya no es necesario. Aquí hay un violín con el menú desplegable predeterminado de niveles múltiples directamente desde la documentación:

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


Respuesta original

Se han producido algunos problemas en el soporte de submenús en github y generalmente los desarrolladores de bootstrap los cierran, como este , por lo que creo que se deja a los desarrolladores usar el bootstrap para resolver algo. Aquí hay una demostración que preparé, que le muestra cómo puede hackear juntos un submenú que funcione.

Código relevante

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

Creé mi propia clase .sub-menu para aplicar a los menús desplegables de 2 niveles, de esta manera podemos ubicarlos al lado de nuestros elementos de menú. También modificó la flecha para mostrarla a la izquierda del grupo de submenús.

Manifestación

[Twitter Bootstrap v3]

Para crear un menú desplegable de nivel n (toque dispositivo amigable) en Twitter Bootstrap v3,

  • jsfiddle-demo del menú desplegable 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:

  

Este ejemplo es de http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Funciona para mí en Bootstrap v3.1.1.

HTML

  

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

Pude arreglar el submenú siempre fijando en la parte superior del menú principal de la respuesta de Andrés con la siguiente adición:

 .dropdown-menu li { position: relative; } 

También agregué un ícono “icon-chevron-right” en los elementos que contienen submenús de menú, y cambio el ícono de negro a blanco al pasar el mouse (para complementar el texto cambiando a blanco y se ve mejor con el fondo azul seleccionado).

Aquí está el cambio completo menos / css (reemplace lo anterior con esto):

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

Acabo de agregar class="span2" al

  • para los elementos desplegables y funcionó.

    Como Bootstrap 3 eliminó la parte del submenú y tenemos que adaptarnos al estilo, creo que es mejor ir con SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

    Eso nos ahorraría tiempo en responder y estilo móvil.

    Este plugin también es muy prometedor.