基於jQuery實現的菜單轉場效果，jquery實現切換

基於jQuery實現的菜單轉場效果，jquery實現切換

這是一個非常流暢的菜單展示效果，應用在亞馬遜上，當你上下移動滑鼠的時候，二級菜單會非常輕快的切換，沒有任何延時，給使用者如滑絲般的感覺。這種效果藉助於一款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有所協助。