Menú vertical con Bootstrap
Si estás trabajando con Bootstrap y tu intención es poder crear un menú vertical con bootstrap, te darás cuenta que no es posible con el código que nos entrega este framework. Para lograr lo que queremos, tendremos que modificar un poco el código para que conseguirlo.
Para esto, tendremos que obtener el menú que queremos añadir a nuestro proyecto web. Para eso nos vamos al sitio web oficial de Bootstrap https://getbootstrap.com/, que al momento de crear este artículo, ya cuenta con su versión 4.1.
Entonces, desde el sitio nos vamos a: Components > Navbar
A elección del menú a generar tomar el código, y tendrá que ser parecido al que se muestra:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
Con el código anterior, podemos generar un menú nav bar genérico con el código de Bootstrap, pero para nuestro propósito, deberemos modificarlo.
index.html
Primeramente se modifica el botón con la class navbar-toggler cambiandolo por un div lo simplificaremos quitando los atributos data-target, aria-controls, aria-expanded y aria-label quedando así:
<div class="btn navbar-toggler d-lg-none d-block">
<span class="navbar-toggler-icon"></span>
</div>
En el código anterior se añadieron dos clases pertenecientes a Bootstrap: d-lg-none y d-block
- d-lg-none: Display large none. Esto quiere decir que el elemento no se visualizará en una pantalla con resolución mayor a
992px - d-none: Es como establecer un atributo de CSS
display: none;
Todo referente a helpers de Bootstrap se pueden encontrar Aquí.
Continuando, eliminamos la clase collapse, el motivo es por que contiene otros atributos que no necesitamos y nos impedirán que funcione correctamente el código.
Nuestro index.html debería verse así una vez agregando todas las etiquetas meta y haber agregado los enlaces a los CDN de Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Menú Vertical Bootstrap</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Style CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="btn navbar-toggler d-lg-none d-block">
<span class="navbar-toggler-icon"></span>
</div>
<div class="navbar-collapse nav-vertical" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<section></section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
CSS – style.css
El estilo CSS debería quedar así:
nav {
border: 1px solid #ccc;
}
@media (max-width: 991.98px) {
.nav-vertical {
border: 1px solid #ccc;
right: -301px;
position: absolute;
width: 300px;
top: 57px;
transition: all .2s ease-out;
}
.active {
right: -1px;
}
}
- Linea 1: agregamos un estilo al elemento
NAVpara darle un border al menú. Esto es opcional. - Linea 5: Aquí aplicamos la restricción de
resolución mediapara que los cambios se visualicen en la resolución que queremos. Como máximo 99.1.98 hacia abajo, se aplican los estilos. - Linea 6: Aplicamos los atributos necesarios para posicionar de manera vertical el elemento de los items del menú. En este caso el contenedor
DIVcon la clasenav-vertical. - Linea 15: Creamos esta clase que nos ayudará a aplicar la mecánica de botón al hacer el click. Con un click en el botón, se añade esta clase y nos modifica la posición del menú moviéndolo de derecha-izquierda. Y al siguiente click, se oculta hacia la derecha. Esto con la ayuda de jQuery.
JS – nav.js
Para crear mecánica de despliegue del menú con el botón, debemos agregar un pequeño código en jQuery.
$(document).ready(function(){
//menú vertical
$(".navbar-toggler").click(function(e) {
e.preventDefault();
$("#navbarNav").toggleClass("active");
});
});
- Linea 1: El
document readyhacemos que jQuery este pendiente de los eventos del DOM. - Linea 4: Al momento de hacer click en el botón, cachamos el evento.
- Linea 6: Ocupamos la clase de jQuery toogleClass. Esto es un switch para agregar o quitar una clase de un elemento.
Ya con los tres archivos tenemos un menú vertical con bootstrap funcional.
Resultado
See the Pen odGEpL by Fabian (@Kraimoz) on CodePen.
Con un poco de estilo, se podrán crear menú más profesionales visualmente.