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