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:
jQuery UI and decided to use the accordion for this purpose. This is what happened…
Lets say that we have a simple site were we have a home, projects and about me pages and we need to create a vertical navigation menu for it using jQuery UI.
The first step was to create a accordion with the navigation links:
Collapse
| Copy Code
1 <div id="navigationMenu"> 2 <h3> <a href="#"> Home </a> </h3> 3 <div> </div> 4 <h3><a href="#"> Projects</a></h3> 5 <div> 6 <ul> 7 <li> <a href="#1"> Project 1</a> </li> 8 <li> <a href="#2"> Project 2 </a> </li> 9 <li> <a href="#3"> Project 3 </a> </li> 10 </ul> 11 </div> 12 <h3> <a href="#"> About me</a></h3> 13 <div></div> 14 </div>
We have to initialize the navigationMenu as an accordion:
Collapse
| Copy Code
1 $(function () { 2 //initializing the accordion 3 $('#navigationMenu').accordion({ 4 collapsible: true, 5 navigation: true, 6 clearStyle: true 7 }); 8 });
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:
Collapse
| Copy Code
1 <div id="navigationMenu"> 2 <h3 class="single-menu-item"> <a href="#"> Home </a> </h3> 3 <div class="single-menu-container"> </div> 4 <h3><a href="#"> Projects</a></h3> 5 <div> 6 <ul> 7 <li> <a href="#1"> Project 1</a> </li> 8 <li> <a href="#2"> Project 2 </a> </li> 9 <li> <a href="#3"> Project 3 </a> </li> 10 </ul> 11 </div> 12 <h3 class="single-menu-item"> <a href="#"> About me</a></h3> 13 <div class="single-menu-container"></div> 14 </div>
We have unbind the click event from the single-menu element:
Collapse
| Copy Code
1 $(function () { 2 //initializing the accordion 3 ... 4 5 $('.single-menu-item').unbind('click'); 6 });
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:
Collapse
| Copy Code
1 #navigationMenu{ width: 270px; } 2 .single-menu-item .ui-icon {display: none !important;} 3 .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 great example of implementing a vertical navigation menu with jQuery please write some links down in the comment.