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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
jquery if条件语句的写法
May 19 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
详解Angular6 热加载配置方案
Aug 18 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 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
php5.4传引用时报错问题分析
2016/01/22 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
JS如何生成动态列表
2020/09/22 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python高级用法总结
2018/05/26 Python
python带参数打包exe及调用方式
2019/12/21 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
兼职学生的自我评价
2013/11/24 职场文书
社区义诊活动总结
2014/04/30 职场文书
工作检讨书大全
2015/01/26 职场文书
钱学森电影观后感
2015/06/04 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python