Click here to Skip to main content
12,297,542 members (56,995 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


12 bookmarked

Using jQueryUI Accordion to create a vertical menu

, 6 Mar 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Some note on how to quickly create a vertical menu with the help of jQueryUI.


A majority of web applications need a navigation menu and there are a lot plug-ins out the to create a great menu. In my case I had to create a vertical navigation menu with some expanding and collapsing behavior.  

There are a lot of solutions for creating such a menu. I was already using  jQueryUI and decided to use the Accordion for this purpose. This is what happened… Let's say that we have a simple site where we have home, projects, and About me pages and we need to create a vertical navigation menu for it using jQueryUI. 

Using the code  

The first step was to create an Accordion with the navigation links:

<div id="navigationMenu"> 
    <h3> <a href="#"> Home </a> </h3>
    <div> </div>
    <h3><a href="#"> Projects</a></h3> 
          <li> <a href="#1"> Project 1</a> </li>
          <li> <a href="#2"> Project 2 </a> </li>
          <li> <a href="#3"> Project 3 </a> </li>
    <h3> <a href="#"> About me</a></h3>

We have to initialize the navigationMenu as an Accordion:

$(function () {
   //initializing the accordion
        collapsible: true,
        navigation: true,
        clearStyle: true

OK, now we can add some code for customizing the navigation accordion. Let's decorate the menu headers and divs that don’t need to be collapsible and single with a class="single-menu-item" for headers and class="single-menu-container" for the divs:

<div id="navigationMenu"> 
  <h3 class="single-menu-item"> <a href="#"> Home </a> </h3>
  <div class="single-menu-container"> </div>
  <h3><a href="#"> Projects</a></h3> 
          <li> <a href="#1"> Project 1</a> </li>
          <li> <a href="#2"> Project 2 </a> </li>
          <li> <a href="#3"> Project 3 </a> </li>
 <h3 class="single-menu-item"> <a href="#"> About me</a></h3>
 <div class="single-menu-container"></div>

We unbind the click event from the single-menu element:

$(function () {
    //initializing the accordion

And as a last step we have to create some CSS rules for single-menu-item and single-menu-container that will rewrite the standard behavior of the jQuery accordion:  

#navigationMenu{ width: 270px; }
  .single-menu-item .ui-icon {display: none !important;}
  .single-menu-container {display: none !important;}

This was the last step. 

Now we have a vertical navigation menu! You can find the code of this example here.

If you have a great example of implementing a vertical navigation menu with jQuery, please provide the links in the comments section.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Daniel Killyevo
Software Developer
Ukraine Ukraine
I'm a .Net Developer. Love exploring and trying out new things.

You may also be interested in...

Comments and Discussions

QuestionWill this work with an asp:menu? Pin
Member 1104781430-Aug-14 16:22
memberMember 1104781430-Aug-14 16:22 
AnswerRe: Will this work with an asp:menu? Pin
Daniel Killyevo13-Dec-14 11:00
memberDaniel Killyevo13-Dec-14 11:00 
QuestionCool Pin
ryanoc3337-Mar-13 3:34
memberryanoc3337-Mar-13 3:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 6 Mar 2013
Article Copyright 2012 by Daniel Killyevo
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid