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.