BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Sidebar Menu o Menú Lateral con jQuery y sin plugins

26/MAY/2017 1.459 visitas Ver comentarios
Sidebar Menu o Menú Lateral con jQuery y sin plugins

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

En este pequeño tutorial vamos a crear un sidebar menu o menú lateral que aparece escondido a primera vista con un botón para mostrarlo u ocultarlo.

Como venimos haciendo desde hace mucho tiempo, vamos a evitar la dependencia de plugins limitándonos exclusivamente a utilizar la librería jQuery 

El primer paso consistirá en armar nuestro menú con una simple lista desordenada UL dentro de un divisor al que aplicaremos la clase sidemenu (ver código 1).

Tal como vemos, no hay dificultad ninguna en esto. Es simplemente un divisor al que aplicaremos unas reglas CSS (ver código 2) que le darán forma, tamaño (200px en este caso), alto al 100% y una posición izquierda de -200px (para que quede escondido a simple vista).

Siguiendo con nuestra web, crearemos un divisor universal y contenedor de todo (llamado contenedor en el ejemplo) con ancho al 100% que usaremos luego para desplazar todo lo que contenga a la derecha esos 200px que haremos aparecer el menú lateral.

Ponemos un enlace con la clase toggle donde queremos que se muestre el botón para abrir y cerrar este menú y le aplicamos unas reglas CSS tal como vemos en el código 2 dedicado al CSS.

Acto seguido, nos queda meter un poco de javascript. Está puesto de modo sencillo para que se entienda fácilmente. Se vincula la librería jQuery y se crea una acción sobre el evento click del botón .toggle.

Esta acción, en primer medida, evitará que la barra de direcciones agregue la almohadilla (#) o que se redirija al href indicado en el enlace .toggle y como acto seguido se ocupará de buscar la posición LEFT (izquierda) del divisor llamado .sidemenu.

Una vez encontrada esta posición llamará a las funciones abrir() o cerrar() según su posición sea mayor o menor a 0, valor que nos indicará si debemos desplazar a la derecha o hacia la izquierda todo el contenido.

Unas reglas declaradas en los elementos llamada transition hará que el desplazamiento sea animado. De no querer usar CSS Transitions, podemos usar animate de jQuery pero esto requerirá hacer cambios en el javascript.

Y listo, ya tenemos un menú lateral que desplaza el contenido a desplegarse. Si quisiéramos, por el contrario, que no desplazara el contenido principal, podemos eliminar las líneas que hacen referencia al .contenedor en las funciones abrir() y cerrar().

Código 1 - HTML
<div class="sidemenu">
		<nav>
			<ul>
				<li><a href="#">OPCI&Oacute;N 1</a></li>
				<li><a href="#">OPCI&Oacute;N 2</a></li>
				<li><a href="#">OPCI&Oacute;N 3</a></li>
			</ul>
		</nav>
	</div>
	<div class="contenedor">
		<a href="#" class="toggle"></a>
	</div>
Código 2 - CSS
* {margin: 0;padding: 0;font-family: sans-serif;border:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

	a:link, a:visited, a:active,a:hover {text-decoration: none;outline:0;}

	.sidemenu {background:#f2f2f2;position:absolute;left:-200px;top:0;width:200px;height:100%;overflow:hidden;transition: left .5s;}
		.sidemenu ul {list-style:none;padding:20px}
			.sidemenu ul li {display:block;border-bottom:1px solid #FFF}
				.sidemenu ul li a:link,.sidemenu ul li a:active,.sidemenu ul li a:visited {display:block;padding:8px;color:#000;transition: 0.3s;}
				.sidemenu ul li a:hover {background:#FFF;}
	
	.contenedor {display:inline;float:left;width:100%;padding:20px;transition: margin-left .5s;}
	
	.toggle {display:block;width:40px;height:40px;background:#f2f2f2 url(toggle.png) 50% 50% no-repeat}
Código 3 - JAVASCRIPT
function abrir() 
	{
		$(".sidemenu").css("left","0");
		$(".contenedor").css("margin-left","200px");
	}
	function cerrar()
	{
		$(".sidemenu").css("left","-200px");
		$(".contenedor").css("margin-left","0");
	}
	
	
	$(document).ready(function()
	{
		$("a.toggle").click(function(e)
		{
			e.preventDefault();
			var p = $(".sidemenu").offset().left;
			if (p<0) abrir();
			else cerrar();
		});
	});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018