Menú Dropdown Me tipo Facebook con jQuery
En este artículo vamos a ver como crear un menú dropdown tipo facebook con jQuery. Al hacer click en los elementos principales aparecerá un submenú escondido con más links.
Para añadir este menú en tu página Web deberás añadir los tags html allí donde lo quieras visualizar. El código sería el siguiente:
<div id="menu"> <ul> <li id="dropdown1"><a href="#">Dropdown 1</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 11</a></li> <li><a href="#">Dropdown 12</a></li> </ul> </li> <li id="dropdown2"><a href="#">Dropdown 2</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 21</a></li> <li><a href="#">Dropdown 22</a></li> <li><a href="#">Dropdown 32</a></li> <li><a href="#">Dropdown 42</a></li> <li><a href="#">Dropdown 52</a></li> </ul> </li> <li id="dropdown3"><a href="#">Dropdown 3</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown 31</a></li> <li><a href="#">Dropdown 32</a></li> <li><a href="#">Dropdown 33</a></li> </ul> </li> </ul> </div>
Ahora en tu hoja de estilos añade las siguientes clases para conseguir el mismo diseño del ejemplo en funcionamiento:
#menu {
background-color: #2C2C2C;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
float:left;
width:940px;
}
#menu ul {
float:left;
width:100%;
padding:0px;
}
#menu ul li {
float:left;
position:relative;
list-style:none;
}
#menu ul li a {
color: #999999;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#menu ul li a:hover {
color: #ffffff;
}
#menu .dropdown-menu {
display: none;
left: 10px;
position: absolute;
top:35px;
width:140px;
background-color:#FFFFFF;
border-radius:5px;
border:1px solid #333333;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#menu .dropdown-menu:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
left: 10px;
position: absolute;
top: -6px;
}
.dropdown-menu li {
float:left;
width:100%;
list-style:none;
}
.dropdown-menu li a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 18px;
padding: 3px 15px;
white-space: nowrap;
}
.dropdown-menu li a:hover {
color: #ffffff;
background-color:#333333;
}
Y ahora solo falta añadir la clave del asunto. Lo puedes hacer tanto dentro del <head> de tu página o antes de la etiqueta de cierre </html>:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu li a').click(function(){
$('.dropdown-menu').hide();
var parent = $(this).parent().attr('id');
if ($('#'+parent+' .dropdown-menu').is (':hidden'))
$('#'+parent+' .dropdown-menu').show();
else
$('#'+parent+' .dropdown-menu').hide();
return false;
});
$('body,html').click(function(){
$('.dropdown-menu').hide();
});
});
</script>
Al hacer click en uno de los links principales del menú, mostramos su correspondiente menú dropdown, que no es más que una lista de elementos que inicialmente está no visible. Con la condición estamos controlando si el menú dropdown está visible en ese momento o no para mostrarlo o ocultarlo.
Ver ejemplo con efecto slideUp y slideDown en funcionamiento
Autor
¿Buscas trabajo de programador?
8 respuestas a “Menú Dropdown Me tipo Facebook con jQuery”
Deja una respuesta
33 artículos que te podrían interesar
Ver más sobre
Muchas Gracias por el aporte, en la parte del código llamas a jquery.js — ese archivo no esta en tu tutorial, si podrias ayudar con eso.
Te lo puedes descargar de la página oficial de jQuery –> http://jquery.com/download/
no me funcionan los links q puedo hacer?
1000 disculpas…ya me salio… no he dormido nada… si era el css… no lo ponia jeje… muchas gracias por compartir tus excelentes conocimientos… tengo un problema no se si me puedas ayudar… t explico… tengo una pantalla que funciona como una nota de compras sencilla, tengo una tabla al centro con 2 filas: la cabecera con 4 columnas(nombre producto,descripcion,precio,abrir), en la fila de abajo tengo tambien 4 columnas con un textinput para nombre,descripcion,precio y en la columna final un boton q me abre una ventana de busqeda de productos(ventana hija) en esta selecciono el producto y paso los datos antes mencionados de la ventana hija a la ventana padre(o abridora) a los 3 textinput de la ventana padre(nombre producto,descripcion,precio),yo puedo ir agregando mas filas dinamicamente mediante el DOM 1,2,3,etc y cada fila con sus 4 columnas respectivamente, boton:agregar fila y boton: borrar fila, el caso q para pasar datos de la ventana hija a la padre dinamicamente no me funciona como hago esto?estaticamente si lo hago el detalle es cuando agrego mas filas(mas productos:agua,refresco de cola,refresco de dieta,etc)AYUDA!!! Ocupo php,javascript y el DOM
necesito un Css?? gracias… no salio todo mi codigo aya arriba… se comio las etiquetas html…head….title…y body
Hola tengo algunos problemas hice todo segun el tutorial pero mmm no me funcionana los links de drop menu, tienes idea de por que podria ser mi problema?
Hola,
Los href los has rellenado? me gustaría ver tu código para darte un respuesta más precisa.
Saludos
Buen dia… hago esto en mi codigo…q estoy haciendo mal??
DOM
function muestraDatos(miboton){
var ventana = window.open(»,»,’height=300,width=300′);
//ventana = document.getElementById(‘formul’);
var num =33;
//entrada_nombre=miform.miboton.value;
ventana.document.write(num);
ventana.document.write(miboton);
alert(miboton+num);
//ventana.document.write(entrada_nombre);
//alert(‘HOLA’);
}
function bevent(miform) {
valor = miform.boton2.value;
alert(valor);
}
$(document).ready(function(){
$(‘#menu li a’).click(function(){
$(‘.dropdown-menu’).hide();
var parent = $(this).parent().attr(‘id’);
if ($(‘#’+parent+’ .dropdown-menu’).is (‘:hidden’))
$(‘#’+parent+’ .dropdown-menu’).show();
else
$(‘#’+parent+’ .dropdown-menu’).hide();
return false;
});
$(‘body,html’).click(function(){
$(‘.dropdown-menu’).hide();
});
});
DOM
Dropdown 1
Dropdown 11
Dropdown 12
Dropdown 2
Dropdown 21
Dropdown 22
Dropdown 32
Dropdown 42
Dropdown 52
Dropdown 3
Dropdown 31
Dropdown 32
Dropdown 33