jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實例
更新時間：2015年08月22日 09:36:42 作者：企鵝
這篇文章主要介紹了jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果,涉及jquery鼠標事件及頁面元素動態(tài)樣式設置的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果。分享給大家供大家參考。具體如下：
這是一款核心基于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 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程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery中:text選擇器用法,以實例形式較為詳細的分析了text選擇器的功能、定義及匹配單行文本框的使用技巧,需要的朋友可以參考下2015-01-01
jQuery的易擴展性吸引了來自全球的開發(fā)者來共同編寫jQuery插件。jQuery插件不僅能夠增強網站的可用性，有效地改善用戶體驗，還可以大大減少開發(fā)時間?，F(xiàn)在的jQuery插件很多，可以根據您的項目需要來選擇。這里為您介紹20款非常不錯的插件。2011-02-02
這篇文章主要介紹了jquery Ajax 全局調用封裝實例詳解的相關資料,需要的朋友可以參考下2017-01-01
本文給大家介紹的是一個非常常見的功能，在輸入密碼的時候提示密碼的強度，本文使用jQuery來實現(xiàn)，有需要的小伙伴可以參考下。2015-07-07
jQuery實現(xiàn)帶有動畫效果的回到頂部和底部代碼
這篇文章主要介紹了jQuery實現(xiàn)帶有動畫效果的回到頂部和底部代碼,涉及jQuery響應鼠標事件動態(tài)操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jQuery中extend函數(shù)詳解,十分詳細，需要的朋友可以參考下2015-02-02
jQuery模板技術和數(shù)據綁定實現(xiàn)代碼
如果你用過ASP.NET的數(shù)據綁定控件，也用過ASP或者JSP里那種通過輸出HTML元素在頁面上顯示數(shù)據的方法，你就知道ASP.NET數(shù)據綁定控件有多么方便。如果能夠將同樣的功能在瀏覽器端用HTML和JavaScript實現(xiàn)，那該是多少美妙的事情。2010-05-05
基于jquery鼠標點擊其它地方隱藏層的實例代碼，需要的朋友可以參考下。2011-01-01
原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12
與使用選擇符查找頁面中的元素相對應，jQuery遍歷操作背后的工作機制也很有特色2011-11-11