基于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常见注意事项
Jan 01 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
VueJS实现用户管理系统
May 29 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php表单敏感字符过滤类
2014/12/08 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
layui table 参数设置方法
2018/08/14 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python列表list操作相关知识小结
2020/01/29 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
《草虫的村落》教学反思
2014/02/16 职场文书
毕业横幅标语
2014/10/08 职场文书
护理工作个人总结
2015/03/03 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript