lunes, 27 de febrero de 2017

Agregarle a Bootstrap 3 submenú de varios niveles.


En este artículo veremos cómo recuperar en caso de hacernos falta un menú de varios niveles con bootstrap 3 ya que tienden a desaparecer estos submenu y a veces por alguna que otra razón nos hacen falta, además si por algún motivo de comodidad queremos que el menú se muestre cuando pasamos el mouse por encima les mostrare como hacerlo.
Para ello tomaremos como ejemplo de estudio esta plantilla de menú en bootstrap 3

<!doctype html>
<html
lang="en">
<head>
    <meta
charset="UTF-8">
    <meta
name="viewport"
         
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta
http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div
class="navbar navbar-default" 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>
            <ul
class="nav navbar-nav pull-right">
                <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>
</body>
</html>

Si copiamos el código y lo ponemos dentro de un fichero veremos el comportamiento por defecto de Bootstrap 3

Aunque estén definidos los submenús de varios niveles este no los reconoce, para que lo haga tomaremos la parte que nos interesa de los estilos de bootstrap 2 y lo pondremos en un fichero personalizado y lo agregamos a esta página.

.pull-right > .dropdown-menu {
   
right: 0;
   
left: auto;
}

.
dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
   
border-top: 0;
   
border-bottom: 4px solid #000000;
   
content: "";
}

.
dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
   
top: auto;
   
bottom: 100%;
   
margin-bottom: 1px;
}


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

.
dropup .dropdown-submenu > .dropdown-menu {
   
top: auto;
   
bottom: 0;
   
margin-top: 0;
   
margin-bottom: -2px;
   
-webkit-border-radius: 5px 5px 5px 0;
   
-moz-border-radius: 5px 5px 5px 0;
   
border-radius: 5px 5px 5px 0;
}

.
dropdown-submenu > a:after {
   
display: block;
   
float: right;
   
width: 0;
   
height: 0;
   
margin-top: 5px;
   
margin-right: -10px;
   
border-color: transparent;
   
border-left-color: #cccccc;
   
border-style: solid;
   
border-width: 5px 0 5px 5px;
   
content: " ";
}

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


.
navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
   
border-top-color: #333333;
   
border-bottom-color: #333333;
}

.
navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
   
color: #555555;
   
background-color: #e5e5e5;
}

.
navbar .nav li.dropdown > .dropdown-toggle .caret {
   
border-top-color: #777777;
   
border-bottom-color: #777777;
}

.
navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
   
border-top-color: #555555;
   
border-bottom-color: #555555;
}

.
navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
   
right: 0;
   
left: auto;
}

.
navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
   
right: 12px;
   
left: auto;
}

.
navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
   
right: 13px;
   
left: auto;
}

.
navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
   
right: 100%;
   
left: auto;
   
margin-right: -1px;
   
margin-left: 0;
   
-webkit-border-radius: 6px 0 6px 6px;
   
-moz-border-radius: 6px 0 6px 6px;
   
border-radius: 6px 0 6px 6px;
}

Con este css de bootstrap 2 si volvemos a probar la página de pruebas de inicio nos mostraría algo como esto:

Ya vemos que reconoce los submenús de varios niveles.
Si se desea trabajar solamente con menús alineados a la izquierda pueden eliminarse ciertas partes ya que este css tiene soporte para los menús alineados a la derecha como se muestra a continuación:


Si además de esto extrañamos el color azul del ítem señalado de la versión antigua de bootstrap podemos tenerlo de vuelta agregando las siguientes reglas:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
   
color: #ffffff;
   
text-decoration: none;
   
background-color: #0081c2;
   
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
   
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
   
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
   
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
   
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
   
background-repeat: repeat-x;
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.
dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
   
color: #ffffff;
   
text-decoration: none;
   
background-color: #0081c2;
   
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
   
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
   
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
   
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
   
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
   
background-repeat: repeat-x;
   
outline: 0;
   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
                

Espero les haya servido de ayuda.

¿Te ha gustado este Post? Compártelo con tus amigos.

2 comentarios:

IconIconIcon