Falta el menú desplegable de Bootstrap

Bootstrap 3 todavía está en RC, pero solo estaba tratando de implementarlo. No pude entender cómo poner una clase de menú secundario. Incluso no hay clases en CSS e incluso los nuevos documentos no dicen nada al respecto

Estaba allí en 2.x con nombre de clase como menú desplegable-submenú

Actualizado 2018

El dropdown-submenu se ha eliminado en Bootstrap 3 RC. En palabras del autor de Bootstrap Mark Otto …

“Los submenús ya no tienen mucho lugar en la web, especialmente la web móvil. Se eliminarán con 3.0” – https://github.com/twbs/bootstrap/pull/6342

Pero, con un poco de CSS adicional puede obtener la misma funcionalidad.

Bootstrap 4 (submenú de navegación en vuelo estacionario)

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

Desplazamiento desplegable del submenú Navbar
Desplazamiento desplegable del submenú Navbar (alineado a la derecha)
Menú desplegable del submenú Navbar clic (alineado a la derecha)
Desplazarse por la barra de navegación (sin submenú)


Bootstrap 3

Aquí hay un ejemplo que usa 3.0 RC 1: http://bootply.com/71520

Aquí hay un ejemplo que usa 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; } 

Marcado de muestra

  

PD: Ejemplo en la barra de navegación que ajusta la posición izquierda: http://bootply.com/92442

La solución @skelly es buena pero no funcionará en dispositivos móviles ya que el estado de vuelo estacionario no funcionará.

He agregado un poco de JS para recuperar el comportamiento BS 2.3.2.

PD: funcionará con el CSS que consigas: http://bootply.com/71520 aunque puedes comentar la siguiente parte:

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

El resultado se puede encontrar en mi tema de WordPress (parte superior de la página): http://shprinkone.julienrenaux.fr/

Hasta hoy (9 de enero de 2014), Bootstrap 3 aún no es compatible con el menú desplegable del menú secundario.

Busqué en Google sobre el menú de navegación sensible y encontré que este es el mejor que pensé.

Son menús inteligentes http://www.smartmenus.org/

Espero que esta sea la salida para cualquiera que quiera un menú de navegación con sub menú multinivel.

actualización 2015-02-17 Los menús inteligentes ahora son completamente compatibles con el estilo del elemento Bootstrap para el submenú. Para obtener más información, consulte el sitio web de menús inteligentes.

El código de Shprink me ayudó más, pero para evitar que el menú desplegable fuera de la pantalla lo actualicé a:

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 fuente blanca y el fondo claro no se veían bien.

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

¡Espero que esto ayude a las personas tanto como a mí!

Pero espero que Bootstrap agregue la función subs nuevamente.

Comentario a la solución realmente útil de Skelly : en Bootstrap-sass 3.3.6, utilities.scss, línea 19: .pull-left tiene float:left !important . Desde entonces, recomiendo usar! Important en su CSS también:

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

Me topé con este problema hace unos días. Probé muchas soluciones y ninguna funcionó realmente para mí. Al final terminé creando una extenion / sustitución del código desplegable de bootstrap. Es una copia del código original con cambios a la función closeMenus.

Creo que es una buena solución ya que no afecta las clases principales de bootstrap js.

Puede verificarlo en gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Yo hago otra solución para el menú desplegable. Espero que esto sea útil. Simplemente agregue este script js