Acordeón Menú jQuery muy fácil de implementar

acordeon

En este tutorial mostraré como crear una extensión jquery para crear un menú acordeón con un movimiento parecido al del antivirus norton, al ser una extensión sera muy facil de implementar en cualquier página web solo un llamado será necesario para transformar una lista de elementos en un acordeón muy elegante.

La idea de este tutorial es pasar de esto

a esto con un solo llamado jquery

Para poder hacerlo genérico de manera que sea aplicable a cualquier sitio web y trasladable facilmente , lo que haremos será crear una extensión jquery de manera que el llamado al menú se haga sobre algun selector css, esto hará que podamos controlar la lista que se convertira a acordeón muy facilmente.

Esta es la llamada javascript quer va a ejecutar todo y va a cambiar la lista por el acordeon.

//el document ready solo espera hasta que el dom (estructura html) este cargada 
 $('document').ready(function(){
           // carga el menu para los elementos que tengan la clase .menu
            $('.menu').lksMenu();
 });

El Código HTML

En si el código html es muy simple , solo la estructura de links que vimos anteriormente, una serie de archivos css con la que jugaremos para cambiarle el estilo y tener diferentes opciones a la hora de implementar, y la inclusión de las librerias jquery y nuestro nuevo plugin que nombre lksMenu , porque lksMenu ? no se tenia que ponerle un nombre y no se me ocurrió otro.
por convención el nombre del archivo donde se encontrara el plugin debe ser jquery.[nombre].js, lo que queda jquery.lksmenu.js

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.lksMenu.js"></script>
        <link rel="stylesheet" type="text/css" href="lksMenuSkin2.css" />
        <script>
        $('document').ready(function(){
            $('.menu').lksMenu();
        });
        </script>
    </head>
    <body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">AjaxShake</a>
                <ul>
                    <li><a href="http://www.ajaxshake.com/es/JS/1111/jquery.html">jQuery</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/1141/flash.html">Flash</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/1121/prototype.html">Prototype</a></li>
                    <li><a href="http://www.ajaxshake.com/es/JS/12111/mootools.html">Mootools</a></li>
                </ul>
            </li>
            <li>
                <a href="#">jsonP Examples</a>
                <ul>
                    <li><a href="http://www.jsonpexamples.com/jsonp-flickr-example/">Flickr</a></li>
                    <li><a href="http://www.jsonpexamples.com/jsonp-example-twitter-call/">Twitter</a></li>
                    <li><a href="http://www.jsonpexamples.com/jsonp-rating-example-using-jquery/">Rating</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Friend Sites</a>
                <ul>
                    <li><a href="http://www.tutorialjquery.com">Tutorial jQuery</a></li>
                    <li><a href="http://www.jsonpexamples.com">jsonp Examples</a></li>
                    <li><a href="http://www.codigogratis.com.ar">Codigo Gratis</a></li>
                    <li><a href="http://www.bugbase.com.ar">Bug Base</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Others</a>
                <ul>
                    <li><a href="http://www.resolvermatrices.com.ar">Resolver Matrices</a></li>
                    <li><a href="http://www.letrade.org">Letras de Canciones</a></li>
                    <li><a href="http://www.cheatscode.org/">Cheats Code</a></li>
                    <li><a href="http://www.solvingequations.net">Solving equations</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
</html>

El Código javascript

Como simpre Trataré de explicarlo linea por linea dentro del código

/* @version 1.0 lksMenu
 * @author Lucas Forchino
 * @webSite: http://www.tutorialjquery.com
 * lksMenu.
 * jQuery Plugin to create a css menu
 */

// Esta técnica es una forma de hacer convivir el script con el hecho de que algunas
// páginas tienen mas de una librería que genera conflicto con el simbolo $
// arrancando con esta funcion que pasa por parametro la misma libreria jQuery
// nos aseguramos que todo funcione correctamente en futuros usos , algo fundamental
// si lo que hacemos es una extensión o plugin jquery donde no sabemos donde se
// implementará
(function($){
    // fn es un shortcut al prototipo (prototypo) de la libreria jquery
    // declarando un método dentro de esta librería la extendemos para ser usada
    // con cualquier selector
    $.fn.lksMenu=function(){
        // para mantener la posibilidad de concatenar métodos es que retornamos la función en
        // lugar de solo ejecutar algo y ya.
        // en este caso usamos un each, porque el selector sobre el que aplicamos la función
        // podría contener más de un elemento , esto es , aplicaría $('.menu').menu() lo cual
        // ejecutaría el código para todos los elementos que tengan la clase menu, como puede
        // haber mas de uno es que ejecutamos el each para que corra sobre todos ellos
        return this.each(function(){
            // obtenemos el elemento que se esta analizando en esta vuelta del each
            var menu= $(this);
            // localizamos los links principales y le asignamos un evento click
            menu.find('ul li > a').bind('click',function(event){
                // identificamos el elemento sobre el que se hizo click
                var currentlink=$(event.currentTarget);
                // los ul que tengan la clase active serán los que estan abiertos
                // si el link sobre que presionamos ya estaba abierto , es decir tenia
                // la clase active, lo cerramos y nada mas
                if (currentlink.parent().find('ul.active').size()==1)
                {
                    //cerramos el link porque apretamos sobre el mismo abierto
                    currentlink.parent().find('ul.active').slideUp('medium',function(){
                        // le quitamos la clase
                        currentlink.parent().find('ul.active').removeClass('active');
                    });
                }
                // si ningun link estaba apretado
                else if (menu.find('ul li ul.active').size()==0)
                {
                    //no hace falta cerrar ninguno y solo abrimos el elemento al
                    // cual se le hizo click
                    show(currentlink);
                }
                else
                {
                    // si ya había un item abierto , simplemente lo localizamos
                    // con find, y lo cerramos con slideup,
                    menu.find('ul li ul.active').slideUp('medium',function(){
                        // una vez que cerramos el que estaba abierto
                        // le quitamos la clase active
                        menu.find('ul li ul').removeClass('active');
                        // abrimos uno nuevo que corresponde al que se clickeo
                        show(currentlink);
                    });
                }
            });

            // esta función es de soporte
            // todo lo que hace es abrir el elemento y asignarle la clase active
            function show(currentlink){
                currentlink.parent().find('ul').addClass('active');
                currentlink.parent().find('ul').slideDown('medium');
            }
        });
    }
    // esto es lo que deciamos al principio , ejecutamos la función por eso los
    // parentesis y le pasamos por parametro la libreria jQuery.
})(jQuery);

El Código CSS

No tiene mucho sentido explicarlo linea por lina, simplemente lo que hice fue darle algo de color a los items de las listas, dar un par de
efectos al pasar el mouse por ensima de los items, esto se ve en los hovers, y asignar tamaños para que se vean los items como cuadros y no como links.

.menu{
      font-family: Helvetica;
}
.menu ul{
    list-style: none;
    margin:0;
    padding:0;
    width:250px;
}
.menu ul li ul{
    width:240px;
}
.menu ul li{
    margin:0;
    padding:5px;
    background-color: #4B4B4B;
}
.menu ul li a{
    padding-top:5px;
    border-color: #404040 #1A1A1A #1A1A1A #505050;
    border-style: solid;
    border-width: 1px;
    padding-left: 10px;
    display:block;
    text-decoration: none;
    color:white;
    font:bold 17px Arial,Helvetica,sans-serif;
    height:30px;
    background: #5B5B5B  no-repeat center right;
    line-height: 1.3em;
}
.menu ul li ul a{
    border-color: #404040 #1A1A1A #1A1A1A #505050;
    border-style: solid;
    border-width: 1px;
    margin-top:2px;
    padding-left: 10px;
    display:block;
    text-decoration: none;
    color:white;
    font-size:14px;
    height:25px;
    font-weight: normal;
    background: #0D0D0D;
}
.menu ul li a:hover{
    background: #DB5A0A  no-repeat center right;
}
.menu ul li ul a:hover{
    background: #FCAB14;
    color:black;
}

.menu ul li ul{
    display:none;
}
Deje un Comentario

*