Menú desplegable simple con jQuery
En este artículo vamos a ver como crear un menú desplegable simple con jQuery.
Como se muestra en la imagen, tendremos unos enlaces principales posicionados de forma horizontal y añadiremos otra lista dentro de algunos de esto elementos para visualizar la lista vertical.
Necesitaremos incluir en nuestro <head> los siguientes estilos:
ul.menu {
float:left;
display:block;
margin-top: 38px;
list-style-type:none;
}
.menu li {
line-height:18px;
font-size:13px;
position:relative;
float:left;
}
.menu li a {
color: #000;
text-transform:uppercase;
padding: 5px 20px;
text-decoration:none;
}
.menu li a:hover {
background: #9c0101;
color: white;
}
.menu li ul {
display:none;
position:absolute;
top:20px;
width: 240px;
background-color: #f4f4f4;
padding:0;
list-style-type:none;
}
.menu li ul li {
width: 200px;
border: 1px solid #9c0101;
border-top:none;
padding: 10px 20px;
}
.menu li ul li:first-child {
border-top: 1px solid #9c0101;
}
.menu li ul li a {
width: 240px;
margin: 0;
padding:0;
}
.menu li ul li a:hover {
width: 240px;
margin: 0;
color: #9c0101;
background:none;
}
Como puedes observar, el aspecto del menú será totalmente editable a través de CSS.
También necesitaremos añadir en nuestro <head> los scripts jquery necesarios:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:has(ul)').hover(function(e) {
$(this).find('ul').css({display: "block"});
},
function(e) {
$(this).find('ul').css({display: "none"});
});
});
</script>
Incluimos la librería jQuery y el script lógico del menú desplegable.
Después en el <body> tendremos nuestro menú:
<ul class="menu"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <ul> <li><a href="#">Jubilación</a></li> <li><a href="#">Pensión</a></li> <li><a href="#">Jubilación por invalidez</a></li> <li><a href="#">Jubilación por edad avanzada</a></li> </ul> </li> <li><a href="#">Reajustes</a></li> <li><a href="#">Contacto</a></li> </ul>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
10 respuestas a “Menú desplegable simple con jQuery”
Deja una respuesta
33 artículos que te podrían interesar
Esta muy bueno este menú y muy poco código
Hola tienes el menu simple para descarga. gracias de antemano
Hola,
En principio todo el código está explicado en este tutorial. De todas formas, hemos habilitado un enlace para la descarga:
https://www.jose-aguilar.com/scripts/jquery/menu-simple-desplegable/menu-simple-desplegable.zip
Saludos
Saludos quisiera ver si me puedes ayudar, tengo un menú que me gusta mucho pero el problema es que tiene pocos submenus y me gustaria agregarle mas en diferentes sitios, como podría hacerlo ya que yo de esto no se nada.
el menús es:
Menú Horizontal despegable con JQuery y CSS3
El que salen las imágenes.
Ya tiene submenus, pero quiero agregarles otros a esos, y no tengo ni idea.
Atentamente Diego.
Hola que tal,
Para este tipo de ayudas que se salen de lo que hay disponible en el blog lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
y para hacer un menu como el que tienes tu en esta pagina me podrias decir porfavor
el menu horizontal Porfavor
El menú está basado en:
http://www.jose-aguilar.com/blog/megamenu-con-css3/
Hola,
Estoy usando el framework Foundation. Justo debajo del menú he puesto un slide, entonces al desplegarse el menú, el submenú me queda por debajo del slide. Cómo puedo solucionar esto? Muchas gracias!
Hola utiliza un z-index:9999; en los estilos del submenú.