Cómo crear un menú desplegable con jQuery

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

menu-desplegableA día de hoy es difícil encontrar una página en internet que no contenga ningún menú desplegable. En los blogs por ejemplo es muy común encontrarse con menús desplegables dividiendo las categorías, páginas o temas dentro del mismo blog, de igual forma en los portales de noticias o en tiendas online, separando los diferentes tipos de productos, marcas…

Existen muchas formas de crear menús desplegables: por medio de CSS, Javascript o jQuery, esta última aporta multitud de efectos para hacerlos más llamativas las listas de menús desplegables a los usuarios.

ddSlick es una extensión jQuery para crear bonitos menús despegables a los que se les podrán incorporar imágenes en miniatura en cada una de las opciones.

 

 

 

 

Crear un menú desplegable con en jQuery

Lo primero es subir a nuestro servidor y hacer las llamadas a los ficheros: javascript y jquery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
       libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/
       Scripts/ddslick.js"></script>

En el siguiente paso creamos un marcador vacío para construir el menú desplegable:

    <div id="myDropdown"></div>

El siguiente paso, insertamos las opciones dentro de los menús, este es un ejemplo:

//Dropdown plugin data
var ddData = [
    {
        text: "Facebook",
        value: 1,
        selected: false,
        description: "Description with Facebook",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/
facebook-icon-32.png"
    },
    {
        text: "Twitter",
        value: 2,
        selected: false,
        description: "Description with Twitter",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/
twitter-icon-32.png"
    },
    {
        text: "LinkedIn",
        value: 3,
        selected: true,
        description: "Description with LinkedIn",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/
linkedin-icon-32.png"
    },
    {
        text: "Foursquare",
        value: 4,
        selected: false,
        description: "Description with Foursquare",
        imageSrc: "http://dl.dropbox.com/u/40036711/Images/
foursquare-icon-32.png"
    }
];

Por último, adjuntamos al plugin las siguientes llamadas para añadir otras funcionalidades:

$('#myDropdown').ddslick({
    data:ddData,
    width:300,
    selectText: "Select your preferred social network",
    imagePosition:"right",
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }
});

Nota: utilizar la llamada a la función onSelected para hacer algo después de que se selecione una de las opciones. El selectedData contendrá: el texto selecionado, el valor, descripción, ruta de la imagen…

Ver demo en ddSlick

 

2 comentarios

  1. Edelin dijo:
    11 octubre, 2012
    Responder

    Esta muy interesante este menu. Pero no esta explicado para principiante.
    -Despues de crear este div: en mi pagina php donde colocar todo esto:
    //Dropdown plugin data
    var ddData = [
    {
    text: “Facebook”,
    value: 1,
    selected: false,
    description: “Description with Facebook”,
    imageSrc: “http://dl.dropbox.com/u/40036711/Images/
    facebook-icon-32.png”
    },
    {
    text: “Twitter”,
    value: 2,
    selected: false,
    description: “Description with Twitter”,
    imageSrc: “http://dl.dropbox.com/u/40036711/Images/
    twitter-icon-32.png”
    },
    {
    text: “LinkedIn”,
    value: 3,
    selected: true,
    description: “Description with LinkedIn”,
    imageSrc: “http://dl.dropbox.com/u/40036711/Images/
    linkedin-icon-32.png”
    },
    {
    text: “Foursquare”,
    value: 4,
    selected: false,
    description: “Description with Foursquare”,
    imageSrc: “http://dl.dropbox.com/u/40036711/Images/
    foursquare-icon-32.png”
    }
    ];
    – Y luego esto:$(‘#myDropdown’).ddslick({
    data:ddData,
    width:300,
    selectText: “Select your preferred social network”,
    imagePosition:”right”,
    onSelected: function(selectedData){
    //callback function: do something with selectedData;
    }
    });

    Busque toda la forma no me funciona.

    • Pedro dijo:
      2 enero, 2013
      Responder

      Lo que no está es para cortar y pegar, hay que leer un poco.

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.