Simple vertical accordion menu using JQuery
I saw various tutorial and jquery snippets to create accordion menu, but most of them were only on mousehover event but nothing with mouse out event.A hectic problem can persist when we try to render the accordion effect with mouseover and mouseout event. So we need to use jquery mouse event i.e ‘hover’ or ‘mouseenter’ and ‘mouseleave’.
What is the problem with ‘mouseover’ and ‘mouseout’ event?
Hovering over children element fires parent’s mouseout event which most of the time dont require.This is caused by event bubbling / propagation.
So we have to use ‘mouseenter’ and ‘mouseleave’ , or ‘hover’ event instead.
Note: Javascript does not provide the direct ‘hover’ event but we can get it using javascript framework eg. ‘Jquery’ .
HTML Stucture
<div id="accordion">
<ul>
<li class='selected parentCategory'>
<a href="http://prabeengiri.com.np"> Category1 </a>
<ul>
<li>
<a href="http://prabeengiri.com.np">subcategory1 </a>
</li>
<li>
<a href="http://prabeengiri.com.np"> subcategory2 </a>
</li>
</ul>
</li>
<li class='parentCategory'>
<a href="http://prabeengiri.com.np"> Category2 </a>
<ul >
<li>
<a href="http://prabeengiri.com.np"> subcategory5 </a>
</li>
<li>
<a href="http://prabeengiri.com.np"> subcategory1 </a>
</li>
</ul>
</li>
<li class='parentCategory'>
<a href="http://prabeengiri.com.np"> Category3 </a>
<ul >
<li>
<a href="http://prabeengiri.com.np"> subcategory5 </a>
</li>
<li>
<a href="http://prabeengiri.com.np"> subcategory1 </a>
</li>
</ul>
</li>
</ul>
</div>In the above html , ’selected’ class has been provided to ‘li’ to make that particular ‘li’ active.And also do not forget to provide the class ‘parentCategory’ to parent ‘li’.
Css for accordion Menu
<style> #accordion {width: 350px;margin: 0 auto;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;} #accordion ul {list-style:none outside none;margin: 0px;padding: 0px;} #accordion ul li {display: block;background: #ccc;border-bottom: 1px solid #e1e1e1;} #accordion ul li a {font-weight: bold;color: #787878;padding: 4px 10px;} #accordion ul li li a {font-weight: bold;color: #FFFFFF;padding: 3px 10px;} #accordion ul li ul {padding: 0 0 0 0px;display:none;} #accordion ul li li {display: block;background: #A6A6A6;border-bottom: 1px solid #ddd;} #accordion a { display:block;text-decoration: none;} </style>
Now its turn of main hero;
JQuery to render vertical accordion menu
<script> jQuery(document).ready(function() { jQuery("#accordion ul li.parentCategory").hover(function() { jQuery(this).find("ul").stop(true,true).slideDown(400).parent().siblings("li:not('.selected')").find('ul').slideUp(400); },function() { jQuery("li:not('.selected')").find("ul").slideUp(400); }).siblings('li.selected').find('ul').show(); }); </script>
<ul>
<li class=’selected’>
<a href=”http://prabeengiri.com.np”> Category1 </a>
<ul>
<li>
<a href=”http://prabeengiri.com.np”>subcategory1 </a>
</li>
<li>
<a href=”http://prabeengiri.com.np”> subcategory2 </a>
</li>
</ul>
</li>
<li>
<a href=”http://prabeengiri.com.np”> Category2 </a>
<ul >
<li>
<a href=”http://prabeengiri.com.np”> subcategory5 </a>
</li>
<li>
<a href=”http://prabeengiri.com.np”> subcategory1 </a>
</li>
</ul>
</li>
<li>
<a href=”http://prabeengiri.com.np”> Category3 </a>
<ul >
<li>
<a href=”http://prabeengiri.com.np”> subcategory5 </a>
</li>
<li>
<a href=”http://prabeengiri.com.np”> subcategory1 </a>
</li>
</ul>
</li>
</ul>
</div>
These kind of effects seems difficult to render……………… unless…. you get familiar with JQuery 
DEMO
If you any kind of queries then please feel free to contact me. I will be pleased to help if something is related to my post.
Loading ...
The vertical accordion menu is really great job, they way your explanation about your script is understandable.
Wish to see your next post soon………