首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript操作excel生成报表示例
May 08 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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
任命书(51) 党团范文(807) 汇报材料(247) 工作总结(1972) 标语(336) 检举信(8) 说明书(38) 协议书(568) 口号(179) 报告(147)
You might like
php&amp;java（二）
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
composer.lock文件的作用
2016/02/03 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
2020/10/15 Javascript
python中的__slots__使用示例
2015/02/26 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python发展史及网络爬虫
2019/06/19 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
优质有机椰子产品：Dr. Goerg
2019/09/24 全球购物
村官工作鉴定评语
2014/01/27 职场文书
C++程序员求职信范文
2014/04/14 职场文书
如何写求职信
2014/05/24 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android