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.

dropdown-me

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 en funcionamiento

Ver ejemplo con efecto slideUp y slideDown en funcionamiento

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

8 respuestas a “Menú Dropdown Me tipo Facebook con jQuery”

  1. Miguel dice:

    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?

    • Jose Aguilar dice:

      Hola,

      Los href los has rellenado? me gustaría ver tu código para darte un respuesta más precisa.

      Saludos

      • daniel may dice:

        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

  2. daniel may dice:

    necesito un Css?? gracias… no salio todo mi codigo aya arriba… se comio las etiquetas html…head….title…y body

  3. daniel may dice:

    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

  4. daniel may dice:

    no me funcionan los links q puedo hacer?

  5. Gundito dice:

    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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre