Published on: 02 Jun, 2013

How to create Accordion Vertical Menu using JQuery and CSS?

Tumblr Digg Google Plus

In this quick tutorial, you will learn how you can create a simple accordion vertical menu using JQuery and CSS. We will include an icon of arrow for expanding and collapsing the menu, and as well a sample of rss feed icon.

See the quick demo for Accordion Vertical Menu using Jquery and CSS.

 

Let's started with the html code first, where it will contain multiple submenus. Note: lisubfirst and lisublast is optional, you can exclude this, if you need to.

<div class="categorylist">
    <ul class="accordion">
        <li>
            <a href="#">Home</a>
            <span class="spanrss"><a href="#"></a></span>
        </li>
        <li class="haschild">
            <a href="#">Product</a>
            <span class="spanrss"><a href="#"></a></span>
            <span class="spanarrowdown"></span>
            <ul style="display:none">
                <li class="lisubfirst">
                    <a href="#"> Product 1</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
                <li>
                    <a href="#">Product 2</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
                <li class="haschild">
                    <a href=""> Product 3</a>
                    <span class="spanrss"><a href="#"></a></span>
                    <span class="spanarrowdown"></span>
                    <ul style="display:none">
                        <li class="lisubfirst">
                            <a href=""> Sub Product 1</a>
                            <span class="spanrss"><a href="#"></a></span>
                        </li>
                        <li>
                            <a href="#"> Sub Product 2</a>
                            <span class="spanrss"><a href="#"></a></span>
                        </li>
                        <li>
                            <a href="#"> Sub Product 3</a>
                            <span class="spanrss"><a href="#"></a></span>
                        </li>
                        <li class="lisublast">
                            <a href="#"> Sub Product 4</a>
                            <span class="spanrss"><a href="#"></a></span>
                        </li>
                    </ul>
                </li>
                <li class="lisublast">
                    <a href="#"> Product 4</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
            </ul>
        </li>
        <li id="l3" class="haschild">
            <a href="#">Service</a>
            <span class="spanarrowdown"></span>
            <span class="spanrss"><a href="#"></a></span>
            <ul style="display:none">
                <li>
                    <a href="#"> Service 1</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
                <li>
                    <a href="#"> Service 2</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
                <li class="lisublast">
                    <a href="#"> Service 3</a>
                    <span class="spanrss"><a href="#"></a></span>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">About Us</a>
            <span class="spanrss"><a href="#"></a></span>
        </li>
    </ul>
</div>

Firstly, you will need to include a jquery file, it is recommended that you are using the hosted jquery file by google.

<script type="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

It is recommended that you always include document.ready method, just to make sure all the html has already been rendered on the site. Note you can place the javascript before the html if you need to (which is recommended).

$(document).ready(function() {
        /* We only apply the click function into the li tag */ 
        $('.accordion li').click(function(ev) {
           
           /* We want to target the click function except for the hyperlink or a link tag. Otherwise when the user click the rss feed or category link, it will not work. Note: in this example, we disable the link. */ 
            if (!$(ev.target).is('a')) {

               /* If the submenu is not visible, we show it up. Otherwise we hide it. The addClass and removeClass will swap the arrow up and down. */ 
                if (!$(this).find('> ul').is(':visible')) {
                    $(this).find('> ul').show();
                    $(this).find('> span.spanarrowdown').addClass('spanarrowup');
                    $(this).find('> span.spanarrowdown').removeClass('spanarrowdown');
                } else {
                    $(this).find('> ul').hide();
                    $(this).find('> span.spanarrowup').addClass('spanarrowdown');
                    $(this).find('> span.spanarrowup').removeClass('spanarrowup');
                }

               /* Remember to return false, otherwise, if you click the submenu LI tag, it will trigger the click of its parent LI tag as well. By returning false, it will only trigger one click only. */ 
                return false;
            }
        });
    });

And the following code will be the CSS part:

/* If you want to make 100% width, you can skip this one. */
.categorylist{
   width:250px;
}
/* Remove the default margin and padding and style of UL tags */
.categorylist ul , .categorylist ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We set the first level menu background. These properties will apply to the submenu as well. Note: the list must have a relative position, this position is used for allocating the position the arrow and rss icon. */
.categorylist ul li{
    background: #afd0e7;
    border-bottom: 1px solid #f1f8fd;
    position: relative;
    cursor:pointer;
}

/* We style menu link */
.categorylist ul li a {
    text-decoration: none;
    color: #333;
    padding: 7px 7px;
    display:inline-block;
}

/* We style the border top of the first sub menu */
.categorylist ul li ul li.lisubfirst{
    border-top: 1px solid #f1f8fd;
}

/* We remove the border bottom of the last sub menu */
.categorylist ul li ul li.lisublast{
    border-bottom:none;
}

/* We style the second level menu*/
.categorylist ul li ul li{
    background:#c2dbed;
}

/* We style the second level link */
.categorylist ul li ul li a{
   padding: 10px 20px;
}

/* We style the first level menu */
.categorylist ul li ul li ul li{
    background:#d7e9f6;
}

/* We style the third level link */
.categorylist ul li ul li ul li a{
     padding: 10px 40px;
}

/* We include a rss icon and place it absolutely to the top right 10px */
.spanrss{
    background:url(rss.png) no-repeat;
    width:16px;
    height:16px;
    position:absolute;
    right:10px;
    top:10px;
    display:inline-block;
}

/* Make sure we specify the dimension and set it to inline-block */
.spanrss a{
    width:16px;
    height:16px;
    display:inline-block;
    overflow:hidden;
    cursor:pointer;
}

/* We style the arrow up and down icon. */
.spanarrowup, .spanarrowdown{
    width:15px;
    height:15px;
    position:absolute;
    right:32px;
    top:11px;
    cursor:pointer;
    background:url(arrow_top.png) no-repeat;
    display:inline-block;
    overflow:hidden;
}

.spanarrowdown{
    background:url(arrow_bottom.png) no-repeat;
}

Need to see the demo? Click here to see the quick demo.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.