Cómo crear un menú desplegable con Jquery

En mi primer tip, hablaré sobre Jquery y haremos un ejemplito básico. Jquery es una potente librería como tal vez ya habrán leído en algun otro blog o foro. Son pequeños archivos de Javascript que alguien nos ha dado para facilitar la vida. Es un framework, que se carga en el HTML de tu archivo. Aquí en Cristalab encuentras un tutorial de jQuery.

Hay que tomar en cuenta algunas cosas como por ejemplo que es el DOM (Modelo de Objetos del Documento). El DOM se conforma de todas tus etiquetas desde <html> hasta </html>. Todo lo que este dentro de estas etiquetas representa el DOM y Jquery se ejecuta muchas veces hasta que el DOM esta completamente cargado, esto lo podemos ver porque encontraremos en la estructua algo como esto:

Código :

$(document).ready(function() {
//aqui escribes tu codigo
}
O podras ver tambien…
$(function(){
//aqui escribes tu codigo
});

Y se preguntaran bien y de donde veo mas ejemplos o donde bajo esta librería pues desde este link www.jquery.com
Jquery ha sacado librerías para poder personalizar los aburridos componentes como los List, Radio, Checkbox, entre otras cosas.

Supongamos que queremos hacer rollover de un div y que debajo de el aparesca otro.

Abriremos un archivo ya sea HTML o PHP como ustedes gusten, luego dentro de <body> vamos a crear 3 DIVS con su respectivo ID y el CSS, a estos dos DIVS vamos a ponerles un color de fondo diferente.

Código :

div#uno a {
background-color:#993300;
width:20px;
height:20px;
display:block;
}
div#Cont_serv {
width:20px;
height:20px;
display:none; 
// NOTA VEASE QUE ESTE ID CONTIENE UN DISPLAY:NONE ESTO QUIERE DECIR QUE ES EL OBJETO AFECTAR Y LO
// NECESITAMOS EN PRINCIPIO OCULTO y dentro de el tendremos el DIV con ID dos.
}
div#dos a {
background-color:#009999;
width:20px;
height:20px;
display:block;
}
<body>
<div id=”contMenu” style=”width:350px; height:20px;”>
<div id=”uno”><a href=”javascript:void(0);”></a></div></div>
<div id=”Cont_serv”>
<div id=”dos”><a href=”javascript:void(0);”></a></div>
</div>
</body>

Debemos importar nuestra librería Jquery antes de la etiqueta de cierre del </head>:

Código :

<script lenguaje=”javascript” type=”text/javascript” src=”js/jquery.js”></script>

Ya teniendo agregada la librería pasaremos a construir la función del Jquery para que esta sea Ejecutada cuando nuestro Navegador haya terminado de leer o cargar el DOM. Cabe mencionar que esta función va dentro de las etiquetas <script></script> ya que siguen siendo codigos de Javascript.

Código :

<script language=”javascript” type=”text/javascript”>
$(function(){
//aqui escribes tu codigo
});
</script>

Ahora dentro de nuestra funcion vamos a poner lo siguiente:

Código :

<script language=”javascript” type=”text/javascript”>
$(function(){
$(’#uno a’).mouseover(function () {
$(”#Cont_serv”).fadeIn(”slow”);
})
});
</script>

Te preguntarás que es eso que esta declarado en la función, es la sentencia en Jquery para poder aparecer el otro div.

La primera parte de esta sentencia es $(’#uno a’), bien aquí es donde vamos a definir a que DIV (o mejor llamado OBJETO ) le vamos a dar la instrucción de que aparezca el otro DIV oculto, es importante poner siempre el ID del objeto entre comillas simples o dobles da igual pero también debe tener el símbolo de #.

La segunda parte de esta sentencia se te hará conocida .mouseover, aquí le estamos indicando que cuando el mouse pase por encima del DIV $(’#uno a’). se va ejecutar lo que seria la función de

Código :

.mouseover (function (){
$(”#Cont_serv”).fadeIn(”slow”);
})

Como podrán observar dentro de los paréntesis del .mouseover(), hay una function que la que hará que el otro DIV aparezca tengan mucho cuidado con los signos de cierre porque luego se les escapa una llave o un paréntesis y no se ejecutara correctamente el código, bien como podrán ver dentro de la función nos encontramos de nuevo con $(”#Cont_serv”), pues aquí le decimos a que div vamos aparecer y el .fadeIn(”slow”), es el modo en que aparecerá el otro objeto.

Ya lo hicimos aparecer ahora queremos que desaparezca al salir del objeto que lo manda aparecer bien solo agregamos la siguientes linea

Código :

.mouseout(function () {$(”#Cont_serv”).fadeOut(”slow”); });

OJO si no saben donde pondrán este código sera después del ultimo paréntesis de cierre de .onmouse().mouseout() es por eso que les comento que hay que tener cuidado el ejercicio quedaría así:

Código :

$(function(){
$(’#uno a’).mouseover(function () {
$(”#Cont_serv”).fadeIn(”slow”);
}).mouseout(function () {
$(”#Cont_serv”).fadeOut(”slow”);
});

Ahora continuamos con la Segunda parte, la cual consiste en que el DIV de que aparece al poner cursor sobre de el este no desaparezca.

Para ello necesitamos analizar la situación, necesitamos detener o cancelar la acción del .mouseout, asi que pues una forma de poder hacer esto es usar un intervalo y de una variable boolean.

Fuera de la función que se ejecuta al terminar de cargar el DOM, vamos a declarar dos variables:

Código :

var myInterval;
var VAL = false;

Acto seguido en nuestra función de .mouseover vamos a sustituir el:

Código :

$(”#Cont_serv”).fadeOut(”slow”)

ahora vamos a poner :

Código :

VAL = true;
activeInterval();

Aquí le vamos a decir que al momento de sacar el mouse de nuetro DIV vamos a cambiar el valor de la Variable VAL a TRUE y vamos a llamar a una FUNCION llamada activeInterval, esta función se encuentra fuera de la función Jquery Seria así:

Código :

function activeInterval(){
if(VAL==true){
myInterval = setInterval(remover,100);
}
}

Como podrán apreciar validamos si VAL es igual a true, entonces ejecutamos el setInterval, ( para los que no conozcan el setInterval es una función de ciclo cada determinado tiempo ), el setInterval esta asignado a nuestra variable myInterval y el setInterval consta de dos parámetros. El primero es donde tenemos la palabra remover que esta es una función y el numero 100 que es el tiempo en milisegundos que tarda en ejecutarse el setInterval.

Así que cuando hagamos mouseout cambiamos el valor de VAL y ejecutamos activeInterval. Ahora vamos a detener el intervalo porque necesitamos hacerlo cada 100 milisegundos. El intervalo se estará ejecutando bien, dentro de nuestra función de Jquery vamos agregarle al DIV que estamos haciendo que aparezca los metodos de mouseover y mouseout, de la siguiente manera:

Código :

$(”#Cont_serv”).mouseover(function () {
clearInterval(myInterval);
}).mouseout(function () {
VAL = true;
activeInterval();
});

Al hacer mouseover cancelamos el intervalo con clearInterval. Llamamos a la variable que contiene el setInterval y que al mouseout de este objeto volvemos a llamar la función que contiene el intervalo. Nos hace falta una función por explicar.

La funcion remover el código que le extrajimos originalmente a la instrucción mouseout:

Código :

function remover(){
clearInterval(myInterval);
$(”#Cont_serv”).fadeOut(”slow”);
}

Al llamar la función, lo primero que hace es cancelar el intervalo y luego hacemos el fadeOut del objeto. Así facil y sencillo. Cabe mencionar que esta estructura puede servir para hacer lo mismo con AS2 y AS3 obviamente con sus respectivas sentencias de cada lenguaje.

Aquí puedes ver un ejemplo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Cómo crear un menú desplegable con Jquery

Publica tu comentario

o puedes...