lksmenu – jQuery Accordion Menu


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">
                    <a href="#">AjaxShake</a>
                        <li><a href="">jQuery</a></li>
                        <li><a href="">Flash</a></li>
                        <li><a href="">Prototype</a></li>
                        <li><a href="">Mootools</a></li>
                    <a href="#">jsonP Examples</a>
                        <li><a href="">Flickr</a></li>
                        <li><a href="">Twitter</a></li>
                        <li><a href="">Rating</a></li>
                    <a href="#">Friend Sites</a>
                        <li><a href="">Tutorial jQuery</a></li>
                        <li><a href="">jsonp Examples</a></li>
                        <li><a href="">Codigo Gratis</a></li>
                        <li><a href="">Bug Base</a></li>
                    <a href="#">Others</a>
                        <li><a href="">Resolver Matrices</a></li>
                        <li><a href="">Letras de Canciones</a></li>
                        <li><a href="">Cheats Code</a></li>
                        <li><a href="">Solving equations</a></li>


    The Javascript Code

    /* @version 1.1 lksMenu
     * @author Lucas Forchino
     * @webSite:
     * lksMenu.
     * jQuery Plugin to create a css menu
            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').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');
                        window.location.href = ahref;
                    // 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('').size()==1)
                         //and we remove the class
                    // si none of the options are open
                    else if (menu.find('ul li').size()==0)
                        // we open the current ul without close anything
                        // if there is an open element , we find it, and we close it with a fade effect
                        menu.find('ul li').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
                // 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){

    20 Responses to "lksmenu – jQuery Accordion Menu"

    Leave a comment to NIkola

    6 × five =