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