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 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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实现智能文件类型检测的实现代码
2011/08/02 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php创建多级目录的方法
2015/03/24 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
nginx 设置多个站跨域
2021/03/09 Servers
FireFox JavaScript全局Event对象
2009/06/14 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
js表单序列化判断空值的实例
2017/09/22 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
给校长的建议书400字
2014/05/15 职场文书
2014年度安全工作总结
2014/12/04 职场文书
辩护意见书
2015/06/04 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
新生儿未入户证明
2015/06/23 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python