基于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 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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 删除数组元素
2009/01/16 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python中函数的用法实例教程
2014/09/08 Python
Python学生信息管理系统修改版
2018/03/13 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
医院护理人员的自我评价分享
2013/10/04 职场文书
开办饭店创业计划书
2013/12/28 职场文书
房产公证书范本
2014/04/10 职场文书
班主任个人工作反思
2014/04/28 职场文书
施工安全标语
2014/06/07 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
立春观后感
2015/06/18 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
关于JavaScript轮播图的实现
2021/11/20 Javascript