Cómo Crear un Menú Jquery con Efecto DropDown

Iñigo Mezo Alvarez

hace 5 meses

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.

Índice

Toggle

¿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.

Escribir reseña

Detalla que necesitas

¿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.

Comprar libro

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>

Ver ejemplo

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.

¿Cómo puedo ayudarte a conseguir más clientes online?

A corto plazo (Publicidad en Google, Facebook, e Instagram).
A medio plazo (SEO local).
A largo plazo (Posicionó tu web).
Diseño página web, tienda online o landing page, si es necesario.
Herramientas de seguimiento y medición.
Diversificación: Marketing de contenidos, mail marketing, redes sociales, alta en directorios, etc.
Automatiza con IA: Optimiza tareas y aumenta tu productividad.

Generador de leads

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.

Compartir entrada: