lksmenu – jQuery Accordion Menu

accordeon96

In this tutorial i will show you how to create an accordion jquery menu. im going to create an extension just to make it simple to implement in every website.

The idea is convert this

  • jsonP Examples 
  • into this

    First as i said we are going to create a jquery extension , that will allow us to implement the menu in every ul li list , and also we can apply the changes to more than one menu.

    The HTML Code

    The structure will be very simple just some ul li and links.
    everything will be wrapped into a div element.

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

     

    The Javascript Code

    /* @version 1.1 lksMenu
     * @author Lucas Forchino
     * @webSite: http://www.jqueryload.com
     * lksMenu.
     * jQuery Plugin to create a css menu
     */
    
    (function($){
        $.fn.lksMenu=function(){
            return this.each(function(){
    
                // we get the menu element in this case is the menu class, we are going to run the menu calling the funcion
               //  like this $('.menu').lksmenu()
    
                var menu= $(this);
    
    
    
                //We can leave open item if the tab is currently active (thanks Nikola)
                menu.find('ul li ul.active').slideDown('medium');
                // we look for the main links and we add a click event
                menu.find('ul li > a').bind('click',function(event){
                    // if the main option is link we execute the href value.
                    // (thanks Nikola) 
                    var ahref = $(event.currentTarget).attr('href');
                    if(ahref!='#'){
                        window.location.href = ahref;
                    }else{
    
    
                    // we take the link clicked by the user
    
                    var currentlink=$(event.currentTarget);
    
                    // if the ul has the active class, that means its open so we close it.
    
                    if (currentlink.parent().find('ul.active').size()==1)
                    {
                        currentlink.parent().find('ul.active').slideUp('medium',function(){
    
                         //and we remove the class
                        currentlink.parent().find('ul.active').removeClass('active');
                        });
                    }
    
                    // si none of the options are open
    
                    else if (menu.find('ul li ul.active').size()==0)
                    {
    
                        // we open the current ul without close anything
                        show(currentlink);
    
                    }
                    else
                    {
    
                        // if there is an open element , we find it, and we close it with a fade effect
    
                        menu.find('ul li ul.active').slideUp('medium',function(){
    
                            // and of couse we remove the class
    
                            menu.find('ul li ul').removeClass('active');
    
                            // we open the current link using the show function
                            show(currentlink);
                        });
                    }
                 }
                });
    
                // this function open the links it just a support funcion, we could include de code inside
               // the main function , but is better put it here for future modifications.
    
                function show(currentlink){
                    currentlink.parent().find('ul').addClass('active');
                    currentlink.parent().find('ul').slideDown('medium');
                }
            });
        }
    })(jQuery);
    

    20 Responses to "lksmenu – jQuery Accordion Menu"

    Leave a comment to legal marketing


    − three = 5