Menú jquery: Efecto DropDown

Home » Blog » Menú jquery: Efecto DropDown

Este es nuestro primer ejemplo sobre el uso de la librería JQUERY, y es un ejemplo de nuestros objetivos: disponer un repositorio de recursos a los que podamos acudir, nosotros y quien considere oportuno, y si es posible, que comentemos entre todos el código fuente o los recursos para mejorar sus efectos y rendimientos. Y comenzamos con un recurso muy útil, un menú jquery con efecto deslizante o dropDown.

El procedimiento que vamos a usar, para que podamos entender el código para poder adaptarlo a las diferentes necesidades de un proyecto es: Pondremos el código fuente, pondremos un enlace para verlo en acción, y finalmente lo comentaremos.

Código Fuente: Menú jquery deslizante

<!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>

El script paso a paso

Después de llamar a la librería JQUERY tenemos que empezar por llamar o cargar el DOM, para poder hacer referencia a los diferentes elementos de nuestra web:

$(document).ready(function() { 
//código
});

En la siguiente línea ocultamos los sub-menús:

$('.menus').hide();

El siguiente paso es que cuando hagamos clic en uno de los menús:

$('p').click(function(){ 
//código
});

Se despliegue el sub-menú del menú en el que hemos hecho clic, y se pliegan el resto:

$(this).next('.menus').slideDown(1000).siblings('.menus').slideUp(1000);

Es importante conocer el comando this, que hace referencia al elemento de la acción, en este caso al elemento donde hacemos clic, de este modo, podemos conocer en cual, de los múltiples menús con el mismo class=»menus», acabamos de pinchar. Y deslizamos hacia abajo (slideDown – 1000: la velocidad de deslizamiento) el atributo que sea  class=’menus’, justo después de donde hemos hecho clic.

Si dejamos el código tal y como esta, cada vez que hagamos clic en un menú se desplegara el sub-menú correspondiente, pero no se cerrarán los abiertos, y como lo que queremos es que solo haya un sub-menú abierto los cerramos llamando a todos los atributos hermanos del clicado que tengan la class = menus:

.siblings('.menus')

Y los deslizamos hacia arriba (slideUp).

Conclusión

Este no es el ejemplo más sencillo para adentrarse en JQUERY pero es un claro ejemplo de como con muy poco código, es posible realizar unos efectos que dan un gran aspecto visual.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023