速度超快的菜单切换效果

这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果。

HTML

首先建立主菜单,我们借用电商网站常见的商品分类。其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用。

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

子菜单与主菜单对应,每一个子菜单的id属性值必须与主菜单的data-submenu-id属性值对应,子菜单内容可以为任意html标签代码,p,img,audio都可以,格式如下:

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

CSS

我们将主菜单dropdown-menu位置固定,子菜单popover默认隐藏,通过css3技术可以设置菜单阴影圆角效果,子菜单内容的css可以根据需要自由发挥,本文未详细贴出,具体可查看demo。

  1. .active{position:relative
  2. .dropdown-menu { positionabsolute
  3.   z-index1000;floatleft
  4.   min-width120px;padding5px 0;margin2px 0 0;list-stylenone
  5.   background-color#ffffff;border1px solid #ccc
  6.   -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px
  7.   -webkit-box-shadow: 0 5px 10px rgba(0000.2);-moz-box-shadow: 0 5px 10px  
  8. rgba(0000.2);box-shadow: 0 5px 10px rgba(0000.2); 
  9. .dropdown-menu li{height:24pxline-height:24pxtext-align:center
  10. .dropdown-menu li a{display:block
  11. .dropdown-menu li a:hover{color:#ffftext-decoration:nonebackground:#39f
  12. .popover { 
  13.   positionabsolute;top: 0;left: 0z-index1010;displaynone
  14.   width320px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px
  15.   -webkit-border-top-left-radius: 0px;-webkit-border-bottom-left-radius: 0px
  16.   border-top-left-radius: 0px;border-bottom-left-radius: 0px;overflowhidden;       
  17.   padding1px 1px 1px 15px;text-alignleft;white-spacenormal
  18.   background-color#fff;border1px solid #ccc
  19.   border1px solid rgba(0000.2); 
  20.   webkit-box-shadow: 0 5px 10px rgba(0000.2);-moz-box-shadow: 0 5px 10px  
  21. rgba(0000.2);box-shadow: 0 5px 10px rgba(0000.2); 

jQuery

下面我们隆重推出jquery.menu-aim.js,该插件是一款基于jQuery的菜单插件,插件作者关注了用户体验并精于算法,根据鼠标轨迹,将菜单切换效果实现得淋漓精致,该插件“超快”的反应效果是不是让我们有中“超爽”的感觉?插件地址:

使用$(element).menuAim()调用jquery.menu-aim.js,当鼠标触发主菜单时调用自定义函数activateSubmenu(),当离开主菜单时调用自定义函数deactivateSubmenu()。

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

如上调用就可以完成子菜单间的快速切换,jquery.menu-aim.js还提供其他几种方法,enter()和exit(),都是控制鼠标移入移出、调用函数等。

接下来,我们写上自定义函数

  1. var $menu = $(".dropdown-menu"); 
  2.  
  3. function activateSubmenu(row) { 
  4.     var $row = $(row), 
  5.     submenuId = $row.data("submenuId"), 
  6.     $submenu = $("#" + submenuId), 
  7.     offset = $menu.offset(), 
  8.     height = $menu.outerHeight(), 
  9.     width = $menu.outerWidth(); 
  10.  
  11.     $submenu.css({ //设置子菜单样式 
  12.          display: "block"//显示子菜单 
  13.          top: offset.top, 
  14.          left: offset.left + width - 5,  
  15.          height: height - 4   
  16.     }); 
  17.     //设置主菜单样式(鼠标滑向主菜单时) 
  18.     $row.find("a").addClass("maintainHover"); 
  19.  
  20. function deactivateSubmenu(row) { 
  21.     var $row = $(row), 
  22.     submenuId = $row.data("submenuId"), 
  23.     $submenu = $("#" + submenuId); 
  24.  
  25.     $submenu.css("display""none"); //隐藏子菜单 
  26.     $row.find("a").removeClass("maintainHover");恢复主菜单样式 

好,这样保存再预览下效果,怎么样,你也可以做一个amazon.cn式的菜单效果了。

转载请注明:代码家园 » 速度超快的菜单切换效果

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)