Demo (with menu for this page)

• Dowload
• Overview
• Holizontal
  • Sample Code
• Vertical
  • Sample Code
• Style

Download

• v1.1
• more old versions

Overview

Apply to ul > li > a tags:

<ul id="menu1"> 
<li><a href="#">Menu1</a>
	<ul>
		<li><a href="#">a</a></li>
		<li><a href="#">bb</a></li>
		<li><a href="#">ccc</a></li>
		<li><a href="#">ddd</a></li>
		<li><a href="#">eeee</a></li>
		<li><a href="#">fffff</a></li>
	</ul>
</li>
<li><a href="#">Menu2</a></li>
<li> 
	<a href="#">Menu3</a>
	<ul>
		<li><a href="#">Menu3a</a></li>
		<li><a href="#">Menu3b</a></li>
	</ul>
</li>
<li> 
	<a href="#">Menu4</a>
	<ul>
		<li><a href="#Menu4a">Menu4a(go to anchor)</a></li>
		<li><a href="#" onclick="alert('Menu4b');return false;">Menu4b(alert)</a></li>
	</ul>
</li>
<li> 
	<a href="#">Menu5</a>
	<ul>
		<li><a href="#">Menu5a</a></li>
		<li> 
			<a href="#">Menu5b</a>
			<ul>
				<li><a href="#">Menu5b-i</a></li>
				<li><a href="#">Menu5b-ii</a></li>
			</ul>
		</li>
		<li><a href="#">Menu5c</a></li>
	</ul>
</li>
</ul>

Plugin has no style ( sepalate layout and style in stylesheet). Please read it

Holizontal

• Menu1
  • a
  • bb
  • ccc
  • ddd
  • eeee
  • fffff
• Menu2
• Menu3
  • Menu3a
  • Menu3b
• Menu4
  • Menu4a(go to anchor)
  • Menu4b(alert)
• Menu5
  • Menu5a
  • Menu5b
    • Menu5b-i
    • Menu5b-ii
  • Menu5c

Sample Code

<link rel="stylesheet" type="text/css" media="screen" href="jquery.ui.potato.menu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.potato.menu.js"></script>
<script type="text/javascript">
(function($) {
	$(document).ready(function(){
		$('#menu1').ptMenu();
	});
})(jQuery);
</script>

Vertical

• Menu1
  • a
  • bb
  • ccc
  • ddd
  • eeee
  • fffff
• Menu2
• Menu3
  • Menu3a
  • Menu3b
• Menu4
  • Menu4a(go to anchor)
  • Menu4b(alert)
• Menu5
  • Menu5a
  • Menu5b
    • Menu5b-i
    • Menu5b-ii
  • Menu5c

Sample Code

<link rel="stylesheet" type="text/css" media="screen" href="jquery.ui.potato.menu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.potato.menu.js"></script>
<script type="text/javascript">
(function($) {
	$(document).ready(function(){
		$('#menu2').ptMenu({vertical:true});
	});
})(jQuery);
</script>

How to Apply Style

style of examples.

ul#menu1 {}
ul#menu2 { clear:both; width:160px;, margin-top:10px; }
li.potato-menu-item {
	width:160px;
	font-size:12px;
	background-color:#333;
	background-color:rgba(0,0,0,0.9);
}
li.potato-menu-item a {
	padding:5px 20px 5px 12px;
	color: #fff;
}
li.potato-menu-hover {
	background-color: #666;
}
li.potato-menu-has-vertical > a {
	background: transparent url(/images/icons/fammini/arrow_down.gif) right no-repeat;
}
li.potato-menu-has-holizontal > a {
	background: transparent url(/images/icons/fammini/arrow_right.gif) right no-repeat;
}
li.potato-menu-item ul {
	border-top:1px solid #444;
	border-left:1px solid #444;
}

Selector

.potato-menu-item .potato-menu-item a	All MenuItems
.potato-menu-hover .potato-menu-hover a	Active MenuItems
.potato-menu-vertical .potato-menu-item .potato-menu-vertical .potato-menu-item a	MenuItems on Vertical Menu
.potato-menu-holizontal .potato-menu-item .potato-menu-holizontal .potato-menu-item a	MenuItems on Holizontal Menu
.potato-menu-group	All MenuSubGroups
.potato-menu-group .potato-menu-item .potato-menu-group .potato-menu-item a	MenuItems on MenuSubGroups
.potato-menu-has-holizontal > a	MenuItems that has MenuSubGroup to left or right
.potato-menu-has-vertical > a	MenuItems that has MenuSubGroup to bottom or top

Menu4a