渐入渐出模仿flickr的横向二级导航菜单效果

时间：2013-04-01 21:27 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿flickr的横向导航菜单效果</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
	body{font-family:Arial, Helvetica, sans-serif; font-size:13px; background:#FFFFFF;}
	ul, li{margin:0; border:0; list-style:none; padding:0;}
	ul{height:21px;}
	h1 { font-size:18px; }
	p { line-height:18px; }
	#info { margin:auto; width:600px; color:#333333; padding:10px; background:#f4f4f4; border:1px solid #DDD; }
	#nicemenu { margin:0 auto; width:600px; margin-top:30px; border-bottom:dotted 1px #E5E5E5; }
	#nicemenu a { color:#0066CC; text-decoration:none; }
	#nicemenu a:hover { text-decoration:underline; }	
	#nicemenu li { display:inline; position:relative; }
	#nicemenu li span { position:relative; z-index:10; padding:4px 4px 4px 6px;  border-bottom:none; line-height:18px; }	
	#nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px;  }	
	#nicemenu li span.over { padding:4px 3px 4px 5px;  border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5;  border-right:solid 1px #999999; border-bottom:solid 1px #fff;  }
	*+html #nicemenu li span.over {  border-top:solid 2px #E5E5E5; padding-bottom:3px; } /* IE6 */
	#nicemenu li span.over a { }
	#nicemenu li span.over a:hover { text-decoration:none; }
	#nicemenu li span.active { padding:4px 3px 4px 5px;  border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5;  border-right:solid 1px #999999; border-bottom:solid 1px #fff;  }
	*+html #nicemenu li span.active {  border-top:solid 2px #E5E5E5; padding-bottom:3px; }
	#nicemenu li span.active a { }
	#nicemenu li span.active a:hover { text-decoration:none; }	
	#nicemenu img.arrow { /*margin-left:4px;*/ cursor:pointer; }
	#nicemenu div.sub_menu { display:none; position:absolute; left:0; top:0px; margin-top:18px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #999999; padding:4px; top:2px; width:160px; background:#FFFFFF; }
	* html #nicemenu div.sub_menu { margin-top:23px; } /* IE6 */
	*+html #nicemenu div.sub_menu { margin-top:23px; } /* IE7 */
	#nicemenu div.sub_menu a:link, 
	#nicemenu div.sub_menu a:visited, 
	#nicemenu div.sub_menu a:hover{ display:block; font-size:11px; padding:4px;}	
	#nicemenu a.item_line { border-top:solid 1px #E5E5E5; padding-top:6px !important; margin-top:3px; }
	
</style>
<script type="text/javascript">

$(document).ready(function(){

$("#nicemenu img.arrow").click(function(){ 
								
		$("span.head_menu").removeClass('active');
		
		submenu = $(this).parent().parent().find("div.sub_menu");
		
		if(submenu.css('display')=="block"){
			$(this).parent().removeClass("active"); 	
			submenu.hide(); 		
			$(this).attr('src','/jscss/demoimg/201211/arrow_hover.png');									
		}else{
			$(this).parent().addClass("active"); 	
			submenu.fadeIn(); 		
			$(this).attr('src','/jscss/demoimg/201211/arrow_select.png');	
		}
		
		$("div.sub_menu:visible").not(submenu).hide();
		$("#nicemenu img.arrow").not(this).attr('src','/jscss/demoimg/201211/arrow-flickr.png');
						
	})
	.mouseover(function(){ $(this).attr('src','/jscss/demoimg/201211/arrow_hover.png'); })
	.mouseout(function(){ 
		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){
			$(this).attr('src','/jscss/demoimg/201211/arrow-flickr.png');
		}else{
			$(this).attr('src','/jscss/demoimg/201211/arrow_select.png');
		}
	});

$("#nicemenu span.head_menu").mouseover(function(){ $(this).addClass('over')})
								 .mouseout(function(){ $(this).removeClass('over') });
	
	$("#nicemenu div.sub_menu").mouseover(function(){ $(this).fadeIn(); })
							   .blur(function(){ 
							   		$(this).hide();
									$("span.head_menu").removeClass('active');
								});		
								
	$(document).click(function(event){ 		
			var target = $(event.target);
			if (target.parents("#nicemenu").length == 0) {				
				$("#nicemenu span.head_menu").removeClass('active');
				$("#nicemenu div.sub_menu").hide();
				$("#nicemenu img.arrow").attr('src','/jscss/demoimg/201211/arrow-flickr.png');
			}
	});			   
							   
								   
});

</script>
</head>
<body>
<div id="nicemenu">
    <ul>
        <li><span class="head_menu"><a href="#">Home</a></span>
        <li><span class="head_menu"><a href="#">You</a><img src="/jscss/demoimg/201211/arrow-flickr.png" width="18" height="15" align="top" class="arrow" /></span>
            <div class="sub_menu">
                 <a href="#">Your Photos</a>
                 <a href="#">Your Archives</a>
                 <a href="#">Your Favorites</a>
                 <a href="#">Your Stats</a>
                 <a href="#" class="item_line">Recent Activity</a>
                 <a href="#">Comments You've Made</a>
                 <a href="#" class="item_line">Upload Photos</a>
                 <a href="#" class="item_line">Your Account</a>
                 <a href="#">Your Profile</a>
                 <a href="#" class="item_line">FlickrMail</a>
            </div>
        </li>
        <li><span class="head_menu"><a href="#">Organize</a><img src="/jscss/demoimg/201211/arrow-flickr.png" width="18" height="15" align="top" class="arrow" /></span>
             <div class="sub_menu">
                <a href="#">All your photos</a>
                <a href="#">Most recently uploaded photos</a>
                <a href="#">Your Sets</a>
                <a href="#">Your Map</a>
            </div>
        </li>
        <li><span class="head_menu"><a href="#">Contacts</a><img src="/jscss/demoimg/201211/arrow-flickr.png" width="18" height="15" align="top" class="arrow" /></span>
            <div class="sub_menu">
                <a href="#">Latest Photos</a>
                <a href="#">Contact List</a>
                <a href="#">People Search</a>
                <a href="#" class="item_line">Invite your Friends</a>
                <a href="#">Invite History</a>
                <a href="#">Guest Pass History</a>
                <a href="#" class="item_line">Give the gift of Flickr</a>
            </div>
        </li>
        <li><span class="head_menu"><a href="#">Groups</a><img src="/jscss/demoimg/201211/arrow-flickr.png" width="18" height="15" align="top" class="arrow" /></span>
        	<div class="sub_menu">
                <a href="#">Your Groups</a>
                <a href="#">Recent Changes</a>
                <a href="#" class="item_line">Search for a Group</a>
                <a href="#" class="item_line">Create a New Group</a>
            </div>
        </li>
        <li><span class="head_menu"><a href="#">Explore</a><img src="/jscss/demoimg/201211/arrow-flickr.png" width="18" height="15" align="top" class="arrow" /></span>
        	<div class="sub_menu">
                <a href="#">Explore Page</a>
                <a href="#">Last 7 Days Interesting</a>
                <a href="#">Calendar</a>
                <a href="#">A Year Ago Today</a>
                <a href="#" class="item_line">World Map</a>
                <a href="#">Places</a>
                <a href="#">Camera Finder</a>
                <a href="#" class="item_line">Popular Tags</a>
                <a href="#">Most Recent Photos</a>
                <a href="#">Creative Commons</a>
                <a href="#" class="item_line">FlickrBlog</a>
                <a href="#" class="item_line">Do More with Your Photos</a>
                <a href="#">Flickr Services</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jQuery多级下拉菜单，模仿著名的相册网站flickr的横向二级导航菜单，鼠标点击菜单后边的小三角，可淡入淡出二级下拉的菜单，有点Select下拉菜单的味道，所以也就称它为二级下拉菜单啦！渐入渐出模仿flickr的横向二级导航菜单效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1020.html

渐入渐出模仿flickr的横向二级导航菜单效果

网页特效