基于jQuery实现的菜单切换效果


Posted in Javascript onOctober 16, 2015

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

基于jQuery实现的菜单切换效果

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有所帮助。

Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
javascript判断复选框是否选中的方法
Oct 16 #Javascript
jquery判断复选框是否被选中的方法
Oct 16 #Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 #Javascript
js生成随机数的方法实例
Oct 16 #Javascript
jQuery实现商品活动倒计时
Oct 16 #Javascript
js如何打印object对象
Oct 16 #Javascript
JavaScript各类型的关系图解
Oct 16 #Javascript
You might like
PHP 高手之路(三)
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python全排列操作实例分析
2018/07/24 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
Python基于Faker假数据构造库
2020/11/30 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
党员评议自我评价
2015/03/03 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers