Menu desplegable

Crear un menu desplegable básico con HTML, CSS y jQuery

Algo que es muy util y recurrente dentro de mis proyectos es el menu desplegable, este elemento le da un toque moderno a nuestras webs, además de ahorrar espacio sobre todo cuando se trata de diseños para dispositivos móviles. Hacemos clic sobre un botón y que despliega el contenido que queremos ver en lugar de llenar la página de texto y tener que hacer scroll hasta encontrar lo que se busca. Por lo que tambien estamos aportando usabilidad a nuestra página web.

Este artículo muestra como crear un menu, pero podría ser simplemente un botón que despliega un contenido como las características de un producto por ejemplo y la acción podría dispararse al pasar el ratón por encima.

Ejemplo de menu:

Crear el menu con HTML

Lo primero es crear un directorio para alojar los archivos que formarán parte de nuestro pequeño proyecto, cada uno puede darle el nombre que quiera y lo llamare menu-dropdown.

Dentro del directorio voy a crear tres archivos. El primero para el código html y al que llamare menu_toggle.html.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Menu Toggle</title>
	<script type="text/javascript" src="httpss://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/menu-acordeon.js"></script>
	<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
	<div class="dropdownMenu">
		<div class="title dropdownButton">
		    <p>MENU I</p>
		</div>
		<div class="dropdownContent">
		    <ul>
			<li><a href="#">ITEM I</a></li>
			<li><a href="#">ITEM II</a></li>
		    </ul>
		</div>
	</div>

	<div class="dropdownMenu">
		<div class="title dropdownButton">
		    <p>MENU II</p>
		</div>
		<div class="dropdownContent">
		    <ul>
			<li><a href="#">ITEM I</a></li>
			<li><a href="#">ITEM II</a></li>
		    </ul>
		</div>
	</div>
</body>
</html>

Estilos CSS

Ahora vamos a darle un poco de estilo visual a nuestro menu, para ello creamos el archivo styles.css. Yo he optado por algo básico para este tutorial, en esta parte cada uno puede dar rienda suelta a su imaginación y creatividad dando a su menu el aspecto que quiera.

body{
	font-family: Arial, Verdana;
}
.dropdownMenu{
	width: 100%;
	margin-bottom: 3px;
}
.title{
	padding: 7px 10px;
	background-color: #994b4b;
	color: white;
	margin-bottom: 0;
}
.title:hover{
	background-color: #c26060;
}
.dropdownButton:hover{
	cursor: pointer;
}
.dropdownButton > p .fa{
	float: right;
}
.dropdownContent ul{
	margin: 0;
	padding: 0 10px;
}
.dropdownContent,
.dropdownButton{
	border: 1px solid #994b4b;
}
.dropdownContent{
	padding: 15px 8px;
	background-color: #fff;
	margin-top: -1px;
}
.dropdownContent ul li{
	list-style: none;
	padding: 5px 0;
}
.dropdownContent ul li a{
	text-decoration: none;
}
.dropdownContent ul li a:hover{
	color: blue;
}

Funciones jQuery

Por ultimo tenemos que crear el archivo menu-acordeon.js donde escribimos el código jQuery que encargara de abrir, cerrar y marcar cual es el menu activo.
Los menus se desplegarán al hacer clic sobre ellos y a su vez se cerrarán los que estén desplegados si existen.

$(document).ready(function() {

	//Botón de acción del acordeón
	$('.dropdownButton').click(function() {

		//Elimina la clase on de todos los botones
		$('.dropdownButton').removeClass('on');

		//Plegamos todo el contenido que esta abierto
	 	$('.dropdownContent').slideUp('slow');

		//Si el siguiente slide no esta abierto lo abrimos
		if($(this).next().is(':hidden') == true) {

			//Añade la clase on en el botón
			$(this).addClass('on');

			//Abre el slide
			$(this).next().slideDown('slow');
		 }

	 });

	// Cerramos todo el contenido al cargar la página
	$('.dropdownContent').hide();

});

Comentarios y opiniones

Puede que tarde en responder, se paciente.

*
*