css - div - Falta el submenú desplegable Bootstrap

label bootstrap

Question

Bootstrap 3 todavía está en RC, pero solo estaba tratando de implementarlo. No pude averiguar 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-submenú

Answer 1

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

Answer 2

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

Pero espero que Bootstrap agregue la característica subs de nuevo lo antes posible.

Answer 3

Hago otra solución para el desplegable. Espero que esto sea útil. Solo agrega 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>

Answer 4

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

Busqué en Google sobre el menú de navegación de respuesta y encontré que este es el mejor i sin embargo.

Es Smart menus http://www.smartmenus.org/

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

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

Answer 5

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

He añadido un poco de JS para recuperar el comportamiento de la BS 2.3.2.

PD: funcionará con el CSS que obtiene: http://bootply.com/71520 aunque puede 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/

Answer 6

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 a las clases principales de bootstrap js.

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

Answer 7

Actualizado 2018

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

"Los submenús simplemente no tienen un lugar en la web en este momento, especialmente la web móvil. Se eliminarán con 3.0" - https://github.com/twbs/bootstrap/pull/6342

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

Bootstrap 4 (submenú de la barra de navegación al desplazarse)

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

Submenú de barra de navegación desplegable
Hover desplegable del submenú de la barra de navegación (alineado a la derecha)
Submenú de la barra de navegación, menú desplegable (alineado a la derecha)
Hover desplegable de 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>

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