jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例


Posted in Javascript onAugust 22, 2015

本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果。分享给大家供大家参考。具体如下:

这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单。不过添加这样一个标记似乎挺简单,你可以自己动手添加吧。

运行效果截图如下:

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery多级下拉侧导航amazonmenu</title>
<style>
.amazonmenu ul {
font: normal 12px Verdana;
list-style: none;
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.amazonmenu ul li {
position: static; 
}
.amazonmenu > ul {
background: white;
border: 1px solid gray;
border-radius: 5px;
width: 200px;
height: 400px;
position: relative;
}
.amazonmenu > ul li a {
color: black;
display: block;
overflow: auto;
padding: 10px 0;
position: relative;
text-decoration: none;
text-indent: 10px;
}
.amazonmenu > ul li.hassub > a::after {
 border: 5px solid transparent;
 border-left-color: gray;
 content: '';
 height: 0;
 position: absolute;
 right: 5px;
 top: 35%;
 width: 0;
}
.amazonmenu > ul li.hassub.selected > a::after {
 border-left-color: red;
}
.amazonmenu ul li a:hover, .amazonmenu ul li.hassub.selected > a {
background: lightblue;
color: navy;
}
.amazonmenu ul li > div, .amazonmenu ul li > ul {
background: white;
border: 1px solid gray;
border-radius: 0 8px 8px 0;
box-shadow: 2px 2px 2px gray;
display: none;
font-weight: normal;
width: 300px;
height: 400px;
left: 100%;
padding: 10px;
position: absolute;
top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1000;
}
/* CSS Media queries */
@media screen and (max-width: 480px) {
 .amazonmenu ul li > div, .amazonmenu ul li > ul {
 left: 30px;
}
.amazonmenu > ul li.hassub.selected::after {
 background: #eee;
 content: '';
 height: 100%;
 left: 0;
 opacity: .8;
 pointer-events: none;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: 1;
}
}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script>
document.createElement("nav") // for IE
var amazonmenu = {
 defaults: {
  animateduration: 100,
  showhidedelay: [100, 100],
  hidemenuonclick: true
 },
 setting: {},
 menuzindex: 1000,
 touchenabled: !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || !!window.Touch || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
 showhide:function($li, action, setting){
  clearTimeout( $li.data('showhidetimer') )
  if (action == 'show'){
   $li.data().showhidetimer = setTimeout(function(){
    $li.addClass('selected')
    $li.data('$submenu')
     .data('fullyvisible', false)
     .css({zIndex: amazonmenu.menuzindex++})
     .fadeIn(setting.animateduration, function(){
      $(this).data('fullyvisible', true)
     })
    }, this.setting.showhidedelay[0])
  }
  else{
   $li.data().showhidetimer = setTimeout(function(){
    $li.removeClass('selected')
    $li.data('$submenu').stop(true, true).fadeOut(setting.animateduration)
    var $subuls = $li.data('$submenu').find('.issub').css({display: 'none'})
    if ($subuls.length > 0){
     $subuls.data('$parentli').removeClass('selected')
    }
   }, this.setting.showhidedelay[1])
  }
 },
 setupmenu:function($menu, setting){
  var $topul = $menu.children('ul:eq(0)')
  function addevtstring(cond, evtstr){
   return (cond)? ' ' + evtstr : ''
  }
  $topul.find('li>div, li>ul').each(function(){ // find drop down elements
   var $parentli = $(this).parent('li')
   var $dropdown = $(this)
   $parentli
    .addClass('hassub')
    .data({$submenu: $dropdown, showhidetimer: null})
    .on('mouseenter click', function(e){
     amazonmenu.showhide($(this), 'show', setting)
    })
    .on('click', function(e){
     e.stopPropagation()
    })
    .children('a').on('click', function(e){
     e.preventDefault() // prevent menu anchor links from firing
    })
   $dropdown
    .addClass('issub')
    .data({$parentli: $parentli})
    .on('mouseleave' + addevtstring(setting.hidemenuonclick || amazonmenu.touchenabled, 'click'), function(e){
     if ($(this).data('fullyvisible') == true){
      amazonmenu.showhide($(this).data('$parentli'), 'hide', setting)
     }
     if (e.type == 'click'){
      e.stopPropagation()
     }
    })
  }) // end find
  $topul.on('click', function(e){
   if ($(this).data('fullyvisible') == true){
    amazonmenu.showhide($(this).children('li.hassub.selected'), 'hide', setting)
   }
  })
  var $mainlis = $topul.children('li.hassub').on('mouseleave', function(){
   amazonmenu.showhide($(this), 'hide', setting)  
  })
 },
 init:function(options){
  var $menu = $('#' + options.menuid)
  this.setting = $.extend({}, options, this.defaults)
  this.setting.animateduration = Math.max(50, this.setting.animateduration)
  this.setupmenu($menu, this.setting)
 }
}
</script>
<script>
jQuery(function(){
 amazonmenu.init({
  menuid: 'mysidebarmenu'
 })
})
</script>
</head>
<body>
<nav id="mysidebarmenu" class="amazonmenu">
 <ul>
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Folder 0</a>
  <div>
   <p>Browse our spring collection of useful webmaster tools and resources! </p>
   <ul>
   <li><a href="#">JavaScript</a></li>
   <li><a href="#">CSS类</a></li>
   <li><a href="#">CSS库</a>
   <li><a href="#">网站工具</a>
   <div>
   <p><h3><a href="#">Image Optimizer</a></h3>Use this tool to easily optimize regular gifs, animated gifs. </p>
   <p><h3><a href="#">我的收藏夹</a></h3>Generate a favicon using any regular image with this tool. </p>
   <p><h3><a href="#">动画GIF</a></h3>Animated Gif Generator lets you easily create an animated gif。</p>
   </div>
   <li><a href="#">PHP程序设计</a></li>
   </ul>
  </div>
 </li>
 <li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a>
   <ul>
    <li>Sub Item 1.3.1</li>
    <li>Sub Item 1.3.2</li>
    <li>Sub Item 1.3.3</li>
   </ul>
  </li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
 </li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Sub Item 2.1</a></li>
  </ul>
 </li>
 <li><a href="#">Item 4</a></li>
 </ul>
</nav>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 #Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 #Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
原生js实现验证码功能
2017/03/16 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
C有"按引用传递"吗
2016/09/06 面试题
学生安全教育材料
2014/02/14 职场文书
高考寄语大全
2014/04/08 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
2015年商场工作总结
2015/04/27 职场文书
秋季运动会加油词
2015/07/18 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers