下载地址

[推荐]一款jQuery插件menu-aim制作速度超快的菜单切换效果源代码

2014-02-15 02:38:00 admin

jQuery插件menu-aim制作速度超快的菜单切换效果

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

HTML

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

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

任意html代码

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 10pxrgba(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 10pxrgba(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式的菜单效果了

脚本素材特效之家程序采用程序自动采集维护整理,内容涉及js效果代码,平面设计教程,网页设计教程,cms建站,网页模版等领域,提供最新的行业资讯,设计教程和素材参考学习.
本文标签: 插件菜单