Falta el submenú desplegable Bootstrap


324

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

Estaba allí en 2.x con el nombre de la clase como menú desplegable


2
Recuerde que algunos componentes han cambiado en la versión 3, incluidos menú, navegación y modales.
Deividi Cavarzan

11
La falta de soporte nativo para esta característica (en mi humilde opinión) útil en BS3 es una de las principales razones por las que aún no me he cambiado. Si bien estoy de acuerdo en que no es tan útil en dispositivos móviles, y ahora tienen un enfoque de `` dispositivos móviles primero '', parece miope eliminar una característica que ya implementaron, que es MUY útil en el escritorio
Andrew Brown

44
Acordó que es miope eliminar la funcionalidad esperada. Este tipo de cambio radical les da a los desarrolladores empresariales un mal día.
RJB

Para hacer un menú desplegable solo use css codepen.io/Gothburz/pen/GpJKqP
Gothburz

Respuestas:


555

Actualizado 2018

Se dropdown-submenuha eliminado en Bootstrap 3 RC. En palabras del autor de Bootstrap Mark Otto ..

"Los submenús simplemente no tienen mucho lugar en la web en este momento, especialmente en 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 barra de navegación al pasar el mouse)

.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ú de la barra de navegación Desplazamiento desplegable del submenú de la barra de
navegación (alineado a la derecha)
Clic desplegable del submenú de la barra de navegación (alineado a la derecha)
Desplazamiento desplegable de 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

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

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


55
Sí, gracias. He agregado la hoja de estilo de mi tema, solo copia pegada de la versión anterior de bootstrap wordpress.org/themes/bikaner
DevC

8
Por ejemplo bootply.com/86684 , agregue la siguiente línea en css para el desplazamiento del fondo correcto del elemento del menú principal al mostrar el submenú: .dropdown-submenu:hover {background: #e2e1e1;}
Eduardo Moralles

1
Funciona con 3.1.1 también. Muchas gracias por la solución. Me golpeaba la cabeza contra la pared tratando de alterar el archivo bootstrap.js para que funcionara correctamente.
Joel Kinzel

2
Estoy a punto de tratar de simplificar las cosas tanto como sea posible, pero existe la necesidad de esto en sitios web grandes sin posibilidad de evitar múltiples niveles de navegación (como los sitios web del gobierno).
Troy Templeman

1
El submenú desaparece incluso antes de que pueda mover el mouse hacia él, por lo que el desplazamiento no funciona. Sin embargo, no se mueve, confiando en el clic, funciona bien.
Polv

61

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

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

PD: funcionará con el CSS que obtengas allí: 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/


55
Eres el tipo más inteligente en esta publicación
user1143669

2
Esta solución no tiene en cuenta el deseo de mantener la funcionalidad de desplazamiento al escritorio y tampoco funciona para el segundo nivel del submenú. Para que esto funcione para más niveles de submenús, cambie las dos últimas líneas a la siguiente línea: $(this).closest(".dropdown-submenu").toggleClass("open");que abrirá / cerrará los elementos del menú de enlaces. Para mantener el cursor sobre el escritorio, es necesario verificar el ancho de la ventana de visualización de los navegadores y será diferente para cada sitio.
bordes

Gracias por tu código. Pero en el teléfono móvil su código tiene error.
jian dan

42

Hasta hoy (9 de enero de 2014) Bootstrap 3 todavía no admite el menú desplegable del submenú.

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

Se trata de menús inteligentes http://www.smartmenus.org/

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

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


Estaba teniendo problemas para intentar arrancar el programa flotante en la PC y hacer clic en la tableta con múltiples niveles. ¡Usted acaba de hacer mi día! Funciona a la perfección: utiliza prácticamente el mismo marcado que bootstrap. ¡Gracias! :)
Hippie

2
Esta solución es gratuita, de código abierto y funciona muy bien con BootStrap 3.
Patrick Desjardins

55
¡Asombroso! ¡Fácil! Para obtener detalles específicos sobre la integración de Bootstrap 3, consulte aquí: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
manafire

1
Smartmenus es agradable, sin embargo, solo funciona con barras de navegación, no con simples menús desplegables.
Nikolai Prokoschenko

1
guardaste mi proyecto :-)
Sikander

5

El código de Shprink me ayudó más, pero para evitar que el menú desplegable salga 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: DE color de fondo: #eeeeee A color de fondo: # 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 la gente tanto como lo hizo para mí!

Pero espero que Bootstrap agregue la función de subs lo antes posible.



2

Me topé con este problema hace unos días. Intenté muchas soluciones y ninguna realmente funcionó para mí al final, terminé creando una extensión / anulación del código desplegable de bootstrap. Es una copia del código original con cambios en 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


Esta es una muy buena solución para el menú desplegable multinivel, me gusta usarlo.
huncyrus

Me alegra que te haya gustado :-)
George Donev

-2

Hago otra solución para el menú desplegable. Espero que esto sea útil Solo agregue este script js

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.