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

2019-11-20 11:45:55

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/jquery-right-show-menu-codes/

具体代码如下：

<!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 IEvar 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实现点击后标记当前菜单位置(背景高亮菜单)效果

下一篇：jQuery实现向下滑出的平滑下拉菜单效果