Dropdown anidado o de varios niveles en Bootstrap
Para hoy necesitaba un dropdown que tuviera dentro de el otro dropdown.
Este código anterior básicamente hace todo el trabajo y me quedo de la siguiente manera.
Lo subrayado en azul es el estilo el cual contiene el anterior código.
Ahora para ponerlo a funcionar en el dropdown que ya se tenga montado se agregan las siguientes lineas:
Este código básicamente es un item de la lista del menu. Ya es cuestión de que acomoden los items a su antojo, y se puede crear mas niveles dentro de dropdown.
Básicamente era un dropdown con varios niveles. En la documentación de bootstrap no existe información acerca de como realizar, aunque es evidente que se puede realizar con solo CSS sin utilizar javascript y eso es lo que exponere en el post.
Para hacer este tipo de navbar, es necesario agregar unas lineas mas al css, yo opte por crearme un nuevo css e importar el estilo abajo del de bootstrap donde agregaba lo siguiente:
.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;
}
Este código anterior básicamente hace todo el trabajo y me quedo de la siguiente manera.
Lo subrayado en azul es el estilo el cual contiene el anterior código.
Ahora para ponerlo a funcionar en el dropdown que ya se tenga montado se agregan las siguientes lineas:
<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>
Este código básicamente es un item de la lista del menu. Ya es cuestión de que acomoden los items a su antojo, y se puede crear mas niveles dentro de dropdown.
Referencias
- http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3