速度超快的菜单切换效果

jerry JQuery 2015年08月20日收藏

这是一个非常流畅的菜单展示效果，应用在亚马逊(amazon.cn)上，当你上下移动鼠标的时候，二级菜单会非常轻快的切换，没有任何延时，给用户如滑丝般的感觉。这种效果借助于一款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可以根据需要自由发挥，本文未详细贴出，具体可查看demo。


.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的菜单插件，插件作者关注了用户体验并精于算法，根据鼠标轨迹，将菜单切换效果实现得淋漓精致，该插件“超快”的反应效果是不是让我们有中“超爽”的感觉？插件地址：https://github.com/kamens/jQuery-menu-aim

使用$(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式的菜单效果了。