這是一個非常流暢的選單展示效果，應用在亞馬遜上，當你上下移動滑鼠的時候，二級選單會非常輕快的切換，沒有任何延時，給用戶如滑絲般的感覺。此效果借助於一款jQuery插件menu-aim，本文將結合實例來講解如何實現速度超快的選單效果。
HTML
先建立主選單，我們借用電商網站常見的商品分類。其html結構程式碼如下，其中我們用到了html5的data-submenu-id屬性設置，這在插件呼叫時非常有用。
<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>
子選單與主選單對應，每個子選單的id屬性值必須與主選單的data-submenu-id屬性值對應，子選單內容可以為任意html標籤代碼，p，img，audio都可以，格式如下：
<div id="submenu-patas" class="popover"> 任意html代码 </div>
CSS
我們將主選單dropdown-menu位置固定，子選單popover預設隱藏，透過css3技術可以設定選單陰影圓角效果，子選單內容的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
下面我們隆重推出jquery.menu-aim.js，該插件是一款基於jQuery的菜單插件，插件作者關注了用戶體驗並精於算法，根據鼠標軌跡，將菜單切換效果實現得淋漓精緻，該插件“超快」的反應效果是不是讓我們有中「超爽」的感覺？外掛程式位址：
使用$(element).menuAim()呼叫jquery.menu-aim.js，當滑鼠觸發主選單時呼叫自訂函數activateSubmenu()，當離開主選單時呼叫自訂函數deactivateSubmenu()。
$(function(){
$(".dropdown-menu").menuAim({
activate: activateSubmenu,//触发主菜单，显示子菜单
deactivate: deactivateSubmenu //离开主菜单，隐藏子菜单
});
}); 如上呼叫就可以完成子選單間的快速切換，jquery.menu-aim.js也提供其他幾種方法，enter()和exit()，都是控制滑鼠移入移出、呼叫函數等。
接下來，我們寫上自訂函數
var $menu = $(".dropdown-menu");
function activateSubmenu(row) {
var $row = $(row),
submenuId = $row.data("submenuId"),
$submenu = $("#" + submenuId),
offset = $menu.offset(),
height = $menu.outerHeight(),
width = $menu.outerWidth();
$submenu.css({ //设置子菜单样式
display: "block", //显示子菜单
top: offset.top,
left: offset.left + width - 5,
height: height - 4
});
//设置主菜单样式（鼠标滑向主菜单时）
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
var $row = $(row),
submenuId = $row.data("submenuId"),
$submenu = $("#" + submenuId);
$submenu.css("display", "none"); //隐藏子菜单
$row.find("a").removeClass("maintainHover");恢复主菜单样式
} 怎麼樣，你也可以做一個amazon.cn式的菜單效果了，以上就是本文的全部內容，希望本文對大家學習jquery有所幫助。
