A clickable dropdown menu with (theoretically unlimited) submenus made out of an an unordered list. It’s behaviour is like an application menu (click to open, click to close, stays open even after hovering elsewhere).

  <script type="text/javascript">$(document).ready(function()
{
	$('#list').clickMenu();
});
</script>

<ul id="list">
	<li>Item one
		<ul>
			<li>Subitem one</li>
			<li>Subitem two</li>
		</ul>
	</li>
	<li>Item two</li>
</ul>
 

More Examples:

 <script type="text/javascript">
$(document).ready(function()
{
    $.fn.clickMenu.setDefaults({arrowSrc:'arrow_right.gif', onClick: function(){/*do something*/}});
    $('selector1').clickMenu(); /* use default values */
    $('selector2').clickMenu({arrowSrc:''}); /* dont use an arrow for submenus */
    $('selector3').clickMenu({subDelay: 1000, mainDelay: 500}); /* slow menu */
});
</script>
  

Available options:

* onClick – function – callback function triggered when a list item is clicked – returning false will stop the default action of the clicked element
* arrowSrc – string – url of the image to be used as an arrow indicating a submenu (e.g. “images/somearrow.jpg” or an empty string if you don’t want an arrow)
* mainDelay – string or number – the time to wait before starting the fadein after hovering over a main menu item (”slow”, “normal” or “fast” or the time in milliseconds – e.g. 1000)
* subDelay – string or number – the time to wait before starting the fadein after hovering submenu item (”slow”, “normal” or “fast” or the time in milliseconds – e.g. 1000)

Demo: http://p.sohei.org/stuff/jquery/clickmenu/demo/demo.html
Download:

• jquery.clickmenu.js (15kb)
• jquery.clickmenu.pack.js (4kb)
• clickmenu.css (2kb – it won’t work without this)

Source: http://p.sohei.org/jquery-plugins/clickmenu/

Related Listings:

1. ClickMenu Plugin for JQuery A clickable dropdown menu with (theoretically unlimited) submenus made out...
2. ColumnHover JQuery Plugin Script A jQuery-plugin that highlights whole columns in a table when...
3. Hwy jQuery ListMenu Plugin This jQuery plugin, developed in the iHwy Labs, allows you...
4. Clean Attractive Vertical Menu using jQuery It looks something like a lava lamp menu (Simple Lava...
5. Good Looking Floating Menu with jQuery Easing A floating effect using jquery.easing, animate top value and a...

Do you like this post?

Email: