Los menús desplegables son una herramienta fundamental en el diseño de interfaces web, permitiendo a los desarrolladores organizar contenido de manera accesible y elegante. Utilizando Jquery, una biblioteca de JavaScript popular, podemos crear un menú DropDown que ofrece una experiencia de usuario mejorada y profesional.
¿Necesitas ayuda GRATIS?
Si tienes un problema y deseas que te eche una mano, contáctame. Si puedo solucionarlo en menos de 1 hora, lo haré a cambio de una reseña. en mi perfil de Google My Business.
¿Quieres aprender JQUERY?
Si estás interesado en aprender JQUERY te recomiendo este libro. Debes tener conocimiento de HTML, CSS y Javascript. Es antiguo, pero en 2024 todavía me resulta útil.
El Código Fuente: Menú Jquery Deslizante
Vamos a desglosar el código necesario para crear un menú deslizante utilizando Jquery. A continuación, se presenta el código fuente completo:
<!DOCTYPE html>
<html>
<head>
<title>Menú JQUERY DROPDOWN</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menus').hide();
$('p').click(function(){
$(this).next('.menus').slideDown(1000).siblings('.menus').slideUp(1000);
});
});
</script>
<style>
*{ width: 100%; margin: 0 auto; }
#bloque{ width:500px; margin-top:20px; border:1px solid black; padding:20px; }
p{ padding:5px; cursor:pointer; position:relative; border:1px solid red; }
.menus a{ display:block; color:black; cursor:pointer; margin-left:20px; }
</style>
</head>
<body>
<div id="bloque">
<p>Menú 1</p>
<div class="menus">
<a href="#">menú 1.1</a>
<a href="#">menú 1.2</a>
<a href="#">menú 1.3</a>
</div>
<p>Menú 2</p>
<div class="menus">
<a href="#">menú 2.1</a>
<a href="#">menú 2.2</a>
<a href="#">menú 2.3</a>
</div>
<p>Menú 3</p>
<div class="menus">
<a href="#">menú 3.1</a>
<a href="#">menú 3.2</a>
<a href="#">menú 3.3</a>
</div>
</div>
</body>
</html>Explicación del Código
Estructura HTML
- HTML Básico: La estructura HTML básica incluye la declaración del tipo de documento, las etiquetas
<html>,<head>, y<body>. - Enlace a Jquery: Utilizamos una CDN para incluir la biblioteca Jquery.
- Script Jquery: El código Jquery se coloca dentro de una etiqueta
<script>.
Estilos CSS
- Estilos Generales: Establecemos el ancho y los márgenes para los elementos generales y el bloque principal.
- Estilos de los Menús: Definimos los estilos para los párrafos que actúan como menús y los enlaces dentro de los submenús.
Script Jquery
- Ocultar Submenús: Al cargar el documento, todos los submenús se ocultan inicialmente utilizando
$('.menus').hide();. - Función de Click: Se define una función que se ejecuta al hacer clic en un párrafo. Esta función despliega el submenú asociado y pliega los demás submenús.
Implementación Paso a Paso
1. Llamada a Jquery
Lo primero que debemos hacer es asegurarnos de que Jquery esté disponible en nuestra página. Utilizamos la siguiente línea para cargar Jquery desde una CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>2. Configuración del Documento
Utilizamos $(document).ready(function() { ... }); para asegurarnos de que el código Jquery se ejecute solo después de que el DOM esté completamente cargado.
$(document).ready(function() {
$('.menus').hide(); // Ocultar submenús
$('p').click(function(){
$(this).next('.menus').slideDown(1000).siblings('.menus').slideUp(1000); // Función de despliegue
});
});3. Ocultar Submenús Inicialmente
Al iniciar, queremos que todos los submenús estén ocultos. Esto se logra con $('.menus').hide();.
4. Función de Click para Desplegar Menús
Cuando el usuario hace clic en uno de los párrafos, el submenú correspondiente se despliega mientras los otros submenús se pliegan. Usamos $(this).next('.menus').slideDown(1000).siblings('.menus').slideUp(1000); para lograr esto.
Conclusión
Crear un menú desplegable con Jquery no solo es simple sino también extremadamente efectivo para mejorar la interfaz de usuario de un sitio web. Con unos pocos pasos y líneas de código, podemos implementar un menú que no solo es funcional sino también estéticamente agradable. Anímate a probar este ejemplo y personalizarlo según tus necesidades específicas.
Deja una respuesta