jquery.ui.potato.menu
Demo (with menu for this page)
Download
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
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
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 |