Si aún no has descubierto la librería jQuery o aún no te crees su eslogan de "Write less, do more", éste es el momento: con ella vamos a aprender a crear un menú desplegable utilizando listas y muy pocas líneas de código. Para ello, sólo tienes que seguir estos pasos:
0. Descargar la librería
Si accedes a la página de jQuery, verás que a la derecha tienes un enlace para descargar la librería. Como no nos interesa (hoy) analizar su funcionamiento, lo mejor es que escojas la versión comprimida, que ocupa tan sólo 19 KB.
Por cierto, si no la has usado nunca, te recomiendo que te leas el Tutorial de jQuery aquí, en Cristalab.
1. Preparar el menú de navegación
Como, en estos tiempos que corren, nos interesa que la web sea lo más semántica posible, vamos a utilizar listas. Crea un nuevo documento HTML e introduce el siguiente código:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menú desplegable con jQuery en 5 minutos</title> </head> <body> <h1>Menú desplegable con jQuery en 5 minutos</h1> <ul> <li><a href="#">Inicio</a> <ul> <li><a href="#">¿Qué es jQuery?</a></li> <li><a href="#">¿Por qué debería usarlo?</a></li> <li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li> </ul> </li> <li><a href="#">Ejemplos</a> <ul> <li><a href="#">Menú desplegable</a></li> <li><a href="#">Fade-in, fade-out</a></li> </ul> </li> <li><a href="#">Contacto</a></li> </ul> </body> </html>
Lo cual producirá algo así.
Pero como esto es un pelín feo, vamos a darle un poco de estilo. Procurando que los enlaces principales aparezcan horizontalmente y sin entrar en detalles de CSS, el resultado sería algo así.
2. Esconder las listas secundarias
Añadiendo otra pequeña regla a nuestro estilo CSS, esconderemos las listas secundarias, de forma que sólo se vean, en principio, los enlaces primarios.
Código :
ul li ul {
/* Resto de estilos... */
display: none;
}
Quedando la cosa así.
Ahora estamos listos para empezar a escribir el JavaScript.
3. Escribir el código JavaScript
Empezamos, como siempre, con:
Código :
$(document).ready(function() {});
Y ahora, buscamos que, cuando el ratón pase por encima de cualquier elemento de lista que contenga, a su vez, otra lista, se muestre dicha lista secundaria. Haciendo uso de los magníficos selectores de jQuery y del evento "hover":
Código :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
</script>
Explicamos lo que haya podido quedar un poco más dudoso:
- El selector es 'ul li:has(ul)'; es decir: todos los elementos de lista (li) que tengan, a su vez, otra lista [li:has(ul)] y que, obviamente, se encuentren dentro de una lista principal [ul li:has(ul)].
- El evento "hover" requiere que se especifiquen dos funciones: una para cuando el ratón llega, y otra para cuando se va.
- "this" hace referencia al elemento de lista sobre el que ha pasado el ratón.
- find() sirve para lo que su propio nombre indica.
¡Y ya tenemos nuestro menú! Fácil, ¿verdad?
Apéndice: Efectos vistosos
jQuery también nos permite efectos como estos:
Efecto 1
Efecto 2
Como veis, con muy pocas líneas de código y muy poco tiempo hemos conseguido un efecto elegante que podremos usar en nuestros sitios web.
Espero que les haya gustado el tip, ¡un saludo!
¿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.
Por juan el 09 de Julio de 2009
"Write less, do more"
Por Hades87 el 10 de Julio de 2009
Por MikeSilver el 11 de Julio de 2009
Pero si se cuenta con una imagen de fondo para boton? aun asi se puede hacer? es que como que ya es cosa del pasado usar color solido en tus menus no creen? claro sin desvalorar el aporte solo que tenia esa duda
Por JasonGamba el 11 de Julio de 2009
bueno gracias.
Por JasonGamba el 11 de Julio de 2009
Por chickenexecutor el 13 de Julio de 2009
Quizás sería mejor esconder las ul li ul desde el js o poner una regla :hover en las css.
Creamoslo o no, pero hay gente que tiene js DESACTIVADO.
un saludo
También podríamos solucionar ese pequeño detalle con JS, pero ya puestos a utilizar jQuery... Además, si lo tienen desactivado de poco servirá.
¿En pleno auge del JS merece la pena tenerlo desactivado?
Por Jose_Antonio el 25 de Agosto de 2009
Por ezeed el 11 de Septiembre de 2009
Por jose gregorio el 13 de Septiembre de 2009
Por Juan Francisco Saave el 28 de Noviembre de 2009
Por Cris el 30 de Diciembre de 2009
Por Jalejo el 31 de Diciembre de 2009
Gracias por el script
PD: Todo funciona excelente
Por Rafael el 07 de Enero de 2010
Por nachon el 12 de Febrero de 2010
Por antonio el 13 de Mayo de 2010
no funciona, seguramente sera por el archivo <script type="text/javascript" src="js/jquery.js"></script> donde esta el codigo de este enlace muchas gracias
Por Alesguz el 14 de Mayo de 2010
Por Jesus el 01 de Junio de 2010
quiero poder desplegar 2 menus uno encima de otro, cuando lo hago y despliego el menu de arriba se encima en el de abajo y muestra la informacion del de abajo.
Por jesus5_san el 06 de Junio de 2010
[email protected]
gracias
Por jesus5_san el 06 de Junio de 2010
gracias
Por jesus5_san el 06 de Junio de 2010
Por David Urgente el 09 de Junio de 2010
Por Alex el 19 de Agosto de 2010
Nadie sabe la solución?
Por Jquery newbie el 22 de Agosto de 2010
Sencillo, conciso y muy util!
Por Clauss Mike el 27 de Agosto de 2010
Por toño el 30 de Agosto de 2010
Por Andros el 13 de Octubre de 2010
Gracias por adelantado.
Por Anonimo el 18 de Octubre de 2010
Gracias.
Por anonimo el 16 de Noviembre de 2010
Por anonimo el 16 de Noviembre de 2010
Por Sun Fire el 22 de Noviembre de 2010
Por Juan el 23 de Noviembre de 2010
$('.menu ul').hover(
function(a)
{
$(this).find('li').css({background: "#A4154D"});
},
function(a)
{
$(this).find('li').css({background: ""});
}
);
});
Lo que sucede es que me pinta todos los menus
Por DJ Malo el 13 de Enero de 2011
Por Nk el 16 de Febrero de 2011
Por Matias el 27 de Febrero de 2011
le cambie el $('ul li:has(ul)').hover( por "('ul li ul li:has(ul)')
pero no funciona, alguien que me pueda ayudar ? gracias.
Por arleytriana el 03 de Marzo de 2011
$(document).ready(function() {
/* @var Object MENU namespace */
if (!window.MENU) var MENU = MENU || {};
MENU = function() {
$('ul li:has(ul)').hover(this._handlerIn, this._handlerOut);
}
/* ... */
MENU.prototype._handlerIn = function() {
$(this).find('ul').slideDown();
}
/* ... */
MENU.prototype._handlerOut = function() {
$(this).find('ul').slideUp();
}
/* ----- create instance ------ */
new MENU();
});
Por arleytriana el 03 de Marzo de 2011
Saludos
Por Sebastian el 27 de Marzo de 2011
Por kosmos el 04 de Abril de 2011
Un saludo.
Por alejandro el 14 de Abril de 2011
Por Israel el 25 de Abril de 2011
Por Mosiah Orellana el 27 de Abril de 2011
Por Mosiah Orellana el 27 de Abril de 2011
Por juan jose el 13 de Mayo de 2011
Por fedexx10 el 17 de Mayo de 2011
Por seba el 12 de Julio de 2011
Por adaraja el 13 de Julio de 2011
¿Se podría hacer?
Gracias por los tutoriales, son sencillos y buenos
Por aadvark el 02 de Septiembre de 2011
Por sorceles el 09 de Diciembre de 2011
Por jemp_intrepido el 01 de Febrero de 2012
atte: jemp_intrepido
Por TuNombre el 10 de Febrero de 2012
Por Julian el 05 de Julio de 2012
avast! ha evitado que visites una página web infectada
Si lo comparamos con en el pasado, cuando el correo electrónico era el método clave para la propagación de virus, investigaciones de Laboratorio de Virus muestran que más del 80% del malware se propaga ahora a través de Internet. Aún más notable es que sólo el 1% proviene de sitios sospechosos o poco fiables. El resto se extiende a través de sitios web legítimos que han sido manipulados.
Sí, estuvo cerca, pero tranquilo…
Detalles de la infección
URL: http://www.jlc-productions.net/tips/ddme...
Proceso: C:\Program Files (x86)\Mozilla Firefox\f...
Infección: HTML:RedirME-inf [Trj]
Julian-blog :
Porque el blog está muerto, y alguien ha comprado el dominio y lo ha redirigido a páginas extrañas. Lamento las molestias causadas.
Por Jose el 07 de Agosto de 2012
Por HaroldPizarro el 09 de Noviembre de 2013
mi codigo es
esto va en el header
<nav id="navigation">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="nav-btn" rel="home">INICIO<span class="arr"></span></a>
<ul id="menu">
<?php wp_nav_menu(); ?>
</ul>
</nav>
esto en las funciones
$(function() {
$(document).on('focusin', '.field, textarea', function() {
if(this.title==this.value) {
this.value = '';
}
}).on('focusout', '.field, textarea', function(){
if(this.value=='') {
this.value = this.title;
}
});
$('#navigation ul li:first-child').addClass('first');
$('.footer-nav ul li:first-child').addClass('first');
$('#navigation a.nav-btn').click(function(){
$(this).closest('#navigation').find('ul').slideToggle()
$(this).find('span').toggleClass('active')
return false;
})
});
$(document).ready(function() {
// Muestra y oculta los menús
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
Por andresgarcia313 el 19 de Noviembre de 2014
Por Henry D'Santiago el 03 de Septiembre de 2016
Por solisarg el 15 de Noviembre de 2018
Cerrando
Jorge