I decided to do an early release of this hover accordion menu plugin I've built for one of my upcoming projects. It collapses and retracts on mouse over and mouse out instead of the typical mouse click.
This jQuery plugin makes use of another plugin by Brian called Hover Intent which tries to determine what the user's intentions are when they are rolling over/out of the menu too fast. It is a very helpful plugin for mouse hover behaviors.
How to use:
The menu is a simple html list.
HTML:
<ul class="menu">
<li><a href="http://www.sam3k.com/blog/#">Link 1</a>
<ul>
<li><a href="http://www.sam3k.com/blog/#">SubLink 1</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 2</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 3</a></li>
</ul>
</li>
<li><a href="http://www.sam3k.com/blog/#">Link 2</a>
<ul>
<li><a href="http://www.sam3k.com/blog/#">SubLink 1</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 2</a></li>
</ul>
</li>
</ul>
<li><a href="http://www.sam3k.com/blog/#">Link 1</a>
<ul>
<li><a href="http://www.sam3k.com/blog/#">SubLink 1</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 2</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 3</a></li>
</ul>
</li>
<li><a href="http://www.sam3k.com/blog/#">Link 2</a>
<ul>
<li><a href="http://www.sam3k.com/blog/#">SubLink 1</a></li>
<li><a href="http://www.sam3k.com/blog/#">SubLink 2</a></li>
</ul>
</li>
</ul>
Call the jquery function like this:
JAVASCRIPT:
$(document).ready(function(){
$(this).hoverAccordionMenu();
});
Feel free to download and use on personal and commercial projects.
June 9th, 2009 at 5:13 am
This works for me, i have been trying to implement an accordian in my joomla site and couldn't but this one works, i would suggest port this into a joomla module and place it on there extensions page your site would get tons of reviews.
Thanks again
June 10th, 2009 at 10:04 am
I'm glad this works for you. I have taken your suggestion and built a Joomla module for it. You can download it here: http://www.sam3k.com/downloads/freebies/joomla/mod_hover_accordion_menu.zip Feel free to use it in personal and commercial projects.
The module has the option to use a copy of the jQuery framework included in the module, or use the Google jQuery library or you can choose not to use either and instead load jQuery on your own. These options are found in Extensions > Module Manager > Hover Accordion Menu.