jquery.ui.potato.menu is simple drop down menu.

Demo


Download

Source

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 (separate layout and style in stylesheet). Please read it.

Horizontal

Sample Code

<link rel="stylesheet" type="text/css" media="screen" href="jquery.ui.potato.menu.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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.

#menu1 {
white-space: nowrap;
}

#menu2 {
clear: both;
width: 140px;
margin-top: 10px;
}

.potato-menu-item {
width: 160px;
font-size: 12px;
font-weight: bold;
background: #16a085;
}

.potato-menu-group {
z-index: 1000;
}

.potato-menu-item a {
padding: 10px 20px 10px 12px;
color: #fff;
}

.potato-menu-hover {
background-color: #1abc9c;
}

.potato-menu-has-vertical > a {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAENSURBVDjLpZM/SwNREMTnxBRpFYmctaKCfwrBSCrRLuL3iEW6+EEUG8XvIVjYWNgJdhFjIXamv3s7u/ssrtO7hFy2fcOPmd03SYwR88xi1cPgpRdjjDB1mBquju+TMt1CFcDd0V7q4GilAwpnd2A0qCvcHRSdHUBqAYgOyaUGIBQAc4fkNSJIIGgGj4ZQx4EEAY3waPUiSC5FhLoOQkbQCJvioPQfnN2ctpuNJugKNUWYsMR/gO71yYPk8tRaboGmoCvS1RQ7/c1sq7f+OBUQcjkPGb9+xmOoF6ckCQb9pmj3rz6pKtPB5e5rmq7tmxk+hqO34e1or0yXTGrj9sXGs1Ib73efh1WaZN46/wI8JLfHaN24FwAAAABJRU5ErkJggg==) right no-repeat;
}

.potato-menu-has-horizontal > a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADvSURBVDjLY/z//z8DJYCJgUIwxAwImOWx22uSExvZBvz68cvm5/dfV5HFGEGxUHoiExwVf//8Zfjz+w/D719/GH79/A3UAMK/GH4CMYiWFJJk+PXrN8PN27cunWq/oA/SwwIzyUrYluHvP6AB//7A8e+/f4H4N8Pvf0D8Fyb2h+HLl696WllqJ69Nu2XOArMZpBCuGajoN1jxbwT9FyH36/dvkCt/w10Acvb+h3uxOhvoZzCbi4OLQVJSiuH1q9cMt2/cvXB7zj0beBgQAwwKtS2AFuwH2vwIqFmd5Fi40H/1BFDzQaBrdTFiYYTnBQAI58A33Wys0AAAAABJRU5ErkJggg==) right no-repeat;
}

.potato-menu-item ul {
border-top: 2px solid #16a085;
border-left: 2px solid #16a085;
}

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-horizontal .potato-menu-item
.potato-menu-horizontal .potato-menu-item a
MenuItems on Horizontal 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-horizontal > a MenuItems that has MenuSubGroup to left or right
.potato-menu-has-vertical > a MenuItems that has MenuSubGroup to bottom or top

Menu4a





blog comments powered by Disqus