本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果。分享给大家供大家参考。具体如下：
这是一款核心基于jquery的多级导航菜单特效，横向向右依次展开菜单项，当然本菜单并不是完美的，因此没有怎么美化，另外包括子菜单的上级菜单中缺少一个菜单标记，这样用户有时候不知道哪个菜单中含有下级子菜单。不过添加这样一个标记似乎挺简单，你可以自己动手添加吧。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/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程序设计有所帮助。
易网时代-编程资源站