基于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 div 遮罩层封锁整个页面
Jul 10 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
js实现简单五子棋游戏
May 28 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
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 阴历-农历-转换类代码
2012/01/16 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python网络编程实例简析
2014/09/26 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python3 logging日志封装实例
2020/04/08 Python
JAVA中运算符的分类及举例
2015/09/12 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
物理课外活动总结
2014/08/27 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
文体活动总结
2015/02/04 职场文书
西安导游词
2015/02/12 职场文书
MySQL触发器的使用
2021/05/24 MySQL
Python编解码问题及文本文件处理方法详解
2021/06/20 Python