La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador de recursos para que se adapte a los diferentes tipos de pantalla y dispositivos, es por ello que he ido “puliendo” el código base de una de mis plantillas, hasta convertirlo en lo que considero una buena base para cualquier proyecto, muy ligera y configurable.

Sin más espera, comenzamos con el código HTML, creamos un elemento “nav” en el cual insertamos una lista desordenada (“ul”) con sus respectivos enlaces dentro de los “item” de la lista.

Creamos un elemento “nav” con dos clases, “navbar_nav” y “menu_open”, a continuación creamos dentro un elemento “ul” con las clases “menu_open” y “navbar_ul”, en ambos elementos se repite la clase “menu_open”, esto lo tenemos que tener en cuenta para asignar propiedades y funciones posteriormente.

<nav class="menu_open navbar_nav">
	<ul class="menu_open navbar_ul">
		...

A continuación creamos los elementos “li” de la lista en los cuales insertamos un enlace, las clases para los elementos “li” serán “menu_li” y para los elementos “a” serán “menu_a”, cerramos los elementos abiertos.

			<li class="menu_li">
			<a class="menu_a" href="#">HOME</a>
		</li>
		<li class="menu_li">
			<a class="menu_a" href="#">CONTACT</a>
		</li>
		<li class="menu_li">
			<a class="menu_a" href="#">ABOUT US</a>
		</li>
		<li class="menu_li">
			<a class="menu_a" href="#">GALLERY</a>
		</li>
	</ul>
</nav>

Todavía añadiremos un elemento más al archivo HTML pero de momento y para ver los pasos correctamente vamos a pasar al archivo CSS.

En primer lugar, los estilos por defecto, asignamos la altura y el color al elemento “nav” por medio de su clase (navbar_nav), un ancho del 100% al elemento “nav” y a los elementos “a” por medio de sus clases “navbar_nav” y “menu_a”, seguidamente asignamos el valor “inline-block” para los elementos “li” y “a” por sus clases “menu_li” y “menu_a” respectivamente.

.navbar_nav {
	height: 50px;
	background-color: #000000;
}
.navbar_nav, .menu_a {
	width: 100%;
}
.menu_li, .menu_a {
	display: inline-block;
}

No vamos muy deprisa ¿verdad?, vamos ahora a asignar propiedades a los elementos “li”, les damos un valor al ancho del 25% porque hemos creado cuatro enlaces (100/4=25), si queremos crear un menu con mas enlaces tenemos que dividir 100 por el número de enlaces y asignar el valor de la misma forma, en porcentajes, hacemos un “float:left” y asignamos un centrado de texto, opacidad y por último, la misma altura que tiene el elemento “nav”. En los elementos “a” asigamos un relleno “16px 0” que podría variar según el tipo de fuente utilizada, para terminar creamos los efectos “hover”.

.menu_li {
	width: 25%;
	float: left;
	opacity: 0.8;
	text-align: center;
	height: 50px;
	background-color: #000000;
}
.menu_a {
	padding: 16px 0;
}
.menu_li:hover, .menu_a:hover {
	background-color: #222222;
	opacity: 1;
}

La barra de navegación ya está en marcha, es hora de volver al archivo HTML, cuando apliquemos estilos para pantallas más pequeñas donde la barra de navegación se convierta en un menú desplegable, demos tener un elemento al que recurrir para mostrar la barra desplegada pulsando sobre el mismo.

¿Arriba o abajo?

El elemento que vamos a crear es un enlace que debemos colocar entre la etiqueta “nav” y la etiqueta “ul”, si lo colocamos entre las aperturas de las etiquetas mencionadas, el menú se desplegará hacía abajo y el enlace permanecerá estático, mientras que si lo colocamos entre las etiquetas de cierre, el menú se dasplazará hacía arriba bajando el enlace como si fuera un elemento más del desplegable, que lío ¿no?, lo mejor será mostrarlo en pantalla.

...
<body>
	<nav class="menu_open navbar_nav">
		<a href="#" id="menu-acces" class="menu_a">OPEN THE MENU</a>
		<ul class="menu_open navbar_ul">
...

 

openmenu1-min

 

 

			</li>
		</ul>
		<a href="#" id="menu-acces" class="menu_a">OPEN THE MENU</a>
	</nav>
</body>

 

openmenu2-min

 

 

Evidentemente todavía no podemos hacer con el menú lo que se muestra en las imágenes, de momento vamos a asignar los estilos, esta vez todos los que quedan por asignar, incluidos los estilos para dispositivos móviles.

Primero vamos a asignar las propiedades al enlace que acabamos de insertar, lo haremos mediante un identificador, el elemento no se debe mostrar en pantallas grandes por lo que le damos un “display:none”, le damos un ancho del 100% y le decimos que su posición sea relativa respecto a su contenedor padre, también asignamos la clase “menu_a” a este elemento.

¿Porque asignamos propiedades si no se va a mostrar el elemento?¿No sería mejor aplicarlas cuando se muestre el elemento?

Bueno, no he contrastado que esto sea una buena práctica, pero normalmente intento que la mayor parte del CSS esté en el mismo sitio, intentando aplicar los mínimos estilos para dispositivos móviles, de esta forma controlo mejor el CSS, si trabajo en “Mobile-first”, lo hago de la misma forma, la mayor parte del CSS en el mismo sitio.

#menu-acces {
	display: none;
	width: 100%;
	position: relative;
	text-align:center;
}

Y asignamos a la clase “menu_open” un “content” sin contenido para hacer sobre el mismo un “display: table” despues de los elementos que contienen esta clase.

.menu_open:after {
	  content: "";
	  display: table;
}

Responsive design

Para aplicar los estilos para dispositivos de diferente pantalla, es necesario que la cabecera del archivo HTML contenga la etiqueta “meta” correspondiente, de paso insertamos en CDN de jQuery y la ruta del archivo con las funciones, el cual vamos a crear más tarde.

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
	<link rel="stylesheet" type="text/css" href="didesweb_responsive_navbar.css" media="all">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="jquery.didesweb_responsive_navbar.js"></script>
</head>

Ahora vamos a por los estilos “media-query”, para el número de enlaces que tenemos, 480px es un ancho ideal para cambiar los estilos de los elementos, lo primero es mostrar el enlace que manteníamos oculto, escondemos la lista y le damos un ancho del 100% a los elementos “li” para que se muestren en bloque y les asignamos una posición relativa.

@media only screen and (max-width: 480px) {
  #menu-acces {
    display: block;
  }
  .navbar_ul {
    display: none;
  }
  .menu_li{
    width: 100%;
    position: relative;
	opacity: 1;
  }

Ya para terminar con el archivo CSS le damos una altura en “auto” a la clase “menu_open” que afecta a los elementos “nav” y “ul” y cerramos la “media-query”

  .menu_open {
    height: auto;
  }
}

Funciones

Solo nos falta crear las funciones, creamos un archivo JS con el nombre que hemos asignado a la ruta en la cabecera, abrimos el típico “document ready event” en jQuery, lo primero es crear una variable (responsive_menu) que nos servirá para acceder al elemento “ul” por su clase (navbar_ul) a lo largo del código, creamos una función para que se muestre la lista al pulsar el enlace con identificador “menu-acces”, que será el único visible en pantallas de 480px o inferiores, y le asignamos el método “preventDefault()” para detener cualquier acción hacía una URL al pulsar el enlace.

$(document).ready(function(){
	responsive_menu = $('.navbar_ul');
	$('#menu-acces').on('click', function(e) {
		e.preventDefault();
		responsive_menu.slideToggle();
	});

Ahora creamos una función para obtener el ancho de la pantalla y comprobar si es mayor que 480px y la lista está oculta, si es así eliminamos el atributo “style” de la lista, ¿Y donde está el atributo “style”? Muy fácil, el atributo puede verse con las herremientas para desarrolladores de cualquier navegador, aunque no voy a profundizar en esto ahora, esto es tema del DOM.

 

navbartool-min

 

	$(window).resize(function(){
		var obtener_ancho = $(this).width(); 
		if(obtener_ancho > 480 && responsive_menu.is(':hidden')) {
			responsive_menu.removeAttr('style');
		}
	}); 

Esta última parte es opcional, muy útil en el caso de que tengamos una web de una sola página (one page) que están muy de moda en estos momentos, la función que vamos a crear sirve para que al pulsar en enlace, la lista se vuelva a esconder, no es necesaría para un sitio web en el que saltemos de una página a otra, porque la lista vuelve a su estado oculto, pero si para una “web one page”, ya que al no cambiar de página, no se cargan los estilos de nuevo y la lista se quedaría abierta, para finalizar cerramos el evento “on ready”.

	$('nav li').on('click', function(e) {                
		var obtener_ancho = $(window).width();
		if(obtener_ancho < 480 ) {
			responsive_menu.slideToggle(); 
		}
	});
});

El código no es nada del otro mundo, una estructura base para crear cosas más complejas a partir del mismo, funciona en IE9 y es muy ligero y sencillo de configurar.

El resultado está disponible para visualizarlo o descargarlo en mi cuenta de GitHub.

Actualización

Tanto en el ejemplo como en el repositorio de Github he actualizado el CSS porque olvidé crear unas clases para que el menú no arrastrara el contenido del siguiente elemento hacía abajo. Ya está solucionado, disculpad el despiste.

Valoraciones


1 valoración

  • Angel 18 marzo, 2021

    Lo he probado y me ha funcionado muy bien

Tu valoración


* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

CAPTCHA


Utilizamos cookies propias y de terceros para el correcto funcionamiento de la web, personalizar el contenido y mostrar publicidad en función de las preferencias del visitante. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies