本文實(shí)例講述了jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果。分享給大家供大家參考。具體如下：
這是一款核心基于jquery的多級(jí)導(dǎo)航菜單特效，橫向向右依次展開(kāi)菜單項(xiàng)，當(dāng)然本菜單并不是完美的，因此沒(méi)有怎么美化，另外包括子菜單的上級(jí)菜單中缺少一個(gè)菜單標(biāo)記，這樣用戶有時(shí)候不知道哪個(gè)菜單中含有下級(jí)子菜單。不過(guò)添加這樣一個(gè)標(biāo)記似乎挺簡(jiǎn)單，你可以自己動(dòng)手添加吧。
運(yùn)行效果截圖如下：
在線演示地址如下：
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多級(jí)下拉側(cè)導(dǎo)航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庫(kù)</a> <li><a href="#">網(wǎng)站工具</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="#">動(dòng)畫(huà)GIF</a></h3>Animated Gif Generator lets you easily create an animated gif。</p> </div> <li><a href="#">PHP程序設(shè)計(jì)</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>希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
