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的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
JS设计模式之单例模式(一)
Sep 29 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP输出时间差函数代码
2013/01/28 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
js给selected添加options的方法
2015/05/06 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Apache如何部署django项目
2017/05/21 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
深入了解Python enumerate和zip
2020/07/16 Python
使用Python封装excel操作指南
2021/01/29 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
销售主管岗位职责范本
2014/02/14 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
军训拉歌口号
2014/06/13 职场文书
计划生育汇报材料
2014/12/26 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS