快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)的菜單切換效果

更新時(shí)間：2015年10月16日 14:59:11 投稿：lijiao

這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的菜單切換效果，需要的朋友可以參考下

這是一個(gè)非常流暢的菜單展示效果，應(yīng)用在亞馬遜上，當(dāng)你上下移動(dòng)鼠標(biāo)的時(shí)候，二級(jí)菜單會(huì)非常輕快的切換，沒(méi)有任何延時(shí)，給用戶(hù)如滑絲般的感覺(jué)。這種效果借助于一款jQuery插件menu-aim，本文將結(jié)合實(shí)例講解如何實(shí)現(xiàn)速度超快的菜單效果。

HTML
首先建立主菜單，我們借用電商網(wǎng)站常見(jiàn)的商品分類(lèi)。其html結(jié)構(gòu)代碼如下，其中我們用到了html5的data-submenu-id屬性設(shè)置，這在插件調(diào)用時(shí)非常有用。

<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="#">數(shù)碼家電</a></li> 
    <li data-submenu-id="submenu-pygmy"><a href="#">美容護(hù)發(fā)</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="#">戶(hù)外汽車(chē)</a></li> 
    <li data-submenu-id="submenu-red-leaf"><a href="#">文化玩樂(lè)</a></li> 
    <li data-submenu-id="submenu-king-colobus"><a href="#">生活服務(wù)</a></li> 
  </ul> 
</div>

子菜單與主菜單對(duì)應(yīng)，每一個(gè)子菜單的id屬性值必須與主菜單的data-submenu-id屬性值對(duì)應(yīng)，子菜單內(nèi)容可以為任意html標(biāo)簽代碼，p，img，audio都可以，格式如下：

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

CSS
我們將主菜單dropdown-menu位置固定，子菜單popover默認(rèn)隱藏，通過(guò)css3技術(shù)可以設(shè)置菜單陰影圓角效果，子菜單內(nèi)容的css可以根據(jù)需要自由發(fā)揮。

.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的菜單插件，插件作者關(guān)注了用戶(hù)體驗(yàn)并精于算法，根據(jù)鼠標(biāo)軌跡，將菜單切換效果實(shí)現(xiàn)得淋漓精致，該插件“超快”的反應(yīng)效果是不是讓我們有中“超爽”的感覺(jué)？插件地址：
使用$(element).menuAim()調(diào)用jquery.menu-aim.js，當(dāng)鼠標(biāo)觸發(fā)主菜單時(shí)調(diào)用自定義函數(shù)activateSubmenu()，當(dāng)離開(kāi)主菜單時(shí)調(diào)用自定義函數(shù)deactivateSubmenu()。

$(function(){ 
   $(".dropdown-menu").menuAim({ 
      activate: activateSubmenu,//觸發(fā)主菜單，顯示子菜單 
      deactivate: deactivateSubmenu //離開(kāi)主菜單，隱藏子菜單 
   }); 
});

如上調(diào)用就可以完成子菜單間的快速切換，jquery.menu-aim.js還提供其他幾種方法，enter()和exit()，都是控制鼠標(biāo)移入移出、調(diào)用函數(shù)等。
接下來(lái)，我們寫(xiě)上自定義函數(shù)

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({ //設(shè)置子菜單樣式 
     display: "block", //顯示子菜單 
     top: offset.top, 
     left: offset.left + width - 5, 
     height: height - 4  
  }); 
  //設(shè)置主菜單樣式（鼠標(biāo)滑向主菜單時(shí)） 
  $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");恢復(fù)主菜單樣式 
}

怎么樣，你也可以做一個(gè)amazon.cn式的菜單效果了，以上就是本文的全部?jī)?nèi)容，希望本文對(duì)大家學(xué)習(xí)jquery有所幫助。

您可能感興趣的文章: