基于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 TO HTML 转换
Jun 26 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
React diff算法的实现示例
Apr 20 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
javascript cookies操作集合
2010/04/12 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python os模块学习笔记
2015/06/21 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
法学专业个人求职信
2013/09/26 职场文书
电气专业应届生求职信
2013/11/01 职场文书
办公室岗位职责
2014/02/12 职场文书
企业法人代表证明书
2014/09/27 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
小学生毕业评语
2014/12/26 职场文书
写给父母的感谢信
2015/01/22 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
react国际化react-intl的使用
2021/05/06 Javascript
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL