亚马逊左侧导航（jquery.menuaim.js）

jquery.menuaim.js

 

 

主菜单

<div class="active">
    <ul class="dropdown-menu" role="menu">
        <li data-submenu-id="submenu-patas"><a href="#">服装服饰</a></li>
        <li data-submenu-id="submenu-snub-nosed"><a href="#"> 箱包配饰</a></li>
        <li data-submenu-id="submenu-duoc-langur"><a href="#">数码家电</a></li>
        <li data-submenu-id="submenu-pygmy"><a href="#">美容护发</a></li>
        <li data-submenu-id="submenu-tamarin"><a href="#">母婴用品</a></li>
        <li data-submenu-id="submenu-monk"><a href="#">家居建材</a></li>
        <li data-submenu-id="submenu-gabon"><a href="#">食品百货</a></li>
        <li data-submenu-id="submenu-grivet"><a href="#">户外汽车</a></li>
        <li data-submenu-id="submenu-red-leaf"><a href="#">文化玩乐</a></li>
        <li data-submenu-id="submenu-king-colobus"><a href="#">生活服务</a></li>
    </ul>
</div> 

子菜单

<div id="submenu-patas" class="popover">
    任意html代码
</div> 

CSS

.active{position:relative}
.dropdown-menu { position: absolute;
  z-index: 1000;float: left;
  min-width: 120px;padding: 5px 0;margin: 2px 0 0;list-style: none;
  background-color: #ffffff;border: 1px solid #ccc;
  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.dropdown-menu li{height:24px; line-height:24px; text-align:center}
.dropdown-menu li a{display:block}
.dropdown-menu li a:hover{color:#fff; text-decoration:none; background:#39f}
.popover {
  position: absolute;top: 0;left: 0; z-index: 1010;display: none;
  width: 320px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
  -webkit-border-top-left-radius: 0px;-webkit-border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;border-bottom-left-radius: 0px;overflow: hidden;
  padding: 1px 1px 1px 15px;text-align: left;white-space: normal;
  background-color: #fff;border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

jQuery触发

$(function(){
     $(".dropdown-menu").menuAim({
            activate: activateSubmenu,//触发主菜单，显示子菜单
            deactivate: deactivateSubmenu //离开主菜单，隐藏子菜单
     });
});