Menú de navegación en bootstrap 4
Vamos a ver como hacer un menú de navegación en bootstrap 4, ya que tenemos conocimientos sobre este framework como para afrontar uno de los elementos más usuales de una web.
Vamos a comenzar viendo el código más sencillo de un menú:
<ul class="nav"> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li> </ul>
Cómo vemos se trata de una lista html con la clase nav, la cual le dice a bootstrap que se trata de un menú de navegación.
Seguidamente observamos que que cada elemento de la lista tiene la clase nav-item que dice al framework que ese elemento pertenece al menú padre en el que se encuentra.
Y finalmente vemos que los enlaces del menú mantienen la clase nav-link para diferenciarse del resto de enlaces de la web.
Igual que hemos visto en otras entradas de este curso como en los botones, los enlaces pueden tener la clase disabled.
Alinear el menú
Supongamos que queremos centrar nuestro menú en la pantalla, para ello usaríamos la clase justify-content-center, y nuestro menú estaría centrado en la pantalla.
Si lo queremos a la derecha sería con la clase justify-content-end y si lo queremos forzar a la izquierda se utilizaría la clase justify-content-start
<ul class="nav justify-content-center"> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li> </ul>
Si por ejemplo queremos tener un menú en columna podemos hacerlo utilizando la clase flex-column y los elementos se alinearán verticalmente en lugar de hacerlo en forma horizontal.
<ul class="nav flex-column"> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li> </ul>
Supongamos que queremos es hacer que el menú ocupe todo el ancho de la pantalla usaremos la clase nav-justified
<ul class="nav nav-justified"> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 2</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li> </ul>
Anidando elementos
Podemos hacer elementos con submenus desplegables utilizando las siguientes clases:
- En el elemento que queremos que se despliegue usamos dropdown para indicar que es un elemento desplegable
- En el enlace se coloca la clase dropdown-toggle para indicar donde hay que clickar para activar el menú desplegable y el atributo data-toggle=»dropdown»
- Creamos un div con la clase dropdpwn-menu que contiene todos los elementos con la clase dropdpwn-item que se colocan directamente en lineas diferentes.
Vale, esto dicho así parece un infierno, pero si lo vemos en código va a resultar mucho más sencillo.
<ul class="nav nav-justified"> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 1</a></li> <li class="nav-item dropdown"><a href="#datepicker.html" class="nav-link dropdown-toggle" data-toggle="dropdown">Enlace 2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Subenlace 1</a> <a href="#" class="dropdown-item">Subenlace 2</a> <a href="#" class="dropdown-item">Subenlace 3</a> </div> </li> <li class="nav-item"><a href="#datepicker.html" class="nav-link disabled">Enlace 3</a></li> <li class="nav-item"><a href="#datepicker.html" class="nav-link">Enlace 4</a></li> </ul>
¿A que ahora si lo entendemos todos?
De este modo es muy fácil extrapolarlo a diferentes niveles de profundidad.
En la siguiente entrada veremos como funciona la barra de navegación.
Gracias por el post.
Sabéis si se puede combinar wordpress y boostrap?
Si es así que necesito?
Gracias
hola, necesitarías una plantilla desarrollada con bootstrap, hay varias para descargar como WP Bootstrap 4 o understrap.
Aunque es muy gratificante llegado el caso aprender a crear tu propia plantilla y usarla, sobre todo por que es relativamente sencillo.
Aquí te dejo la primera entrada que hice sobre la creación de temas en WordPress y puedes seguir todo el tutorial
necesito un menu de navegacion que tenga dos botones que despleguen cada uno un menu distinto. un icono a la izquierda que al pulsar desplega un menu y otro icono a la derecha que desplegue otro menu. es posible?
Yo opino que si solo tienes que jugar con los elementos de bootstrap, listas, menus, botones… puede que incluso lo q estes pidiendo no sea lo mejor crearlo como un menú sino como un grid de elementos, depende del proyecto y de como este el diseño, pero posible es.
¡Excelente! Necesitaba una introducción a cómo se usaban estos atributos y opciones, ahora consegui hacer un navbar bien bonito gracias a ud. 🙂
Me alegra que te haya servido 🙂