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 ( sepalate 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