jQuery制作垂直箭头菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery制作垂直箭头菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>清晰和完美的jQuery垂直菜单</title>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script>
	$(document).ready(function () {
		//Set the height of the block
		$('#menu .block').height($('#menu li').height());
		//go to the default selected item
		topval = $('#menu .selected').position()['top'];
		$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
		$('#menu li').hover(
			function() {
				//get the top position
				topval = $(this).position()['top'];
				//animate the block
				//you can add easing to it
				$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
				//add the hover effect to menu item
				$(this).addClass('hover');	
			},
			function() {		
				//remove the hover effect
				$(this).removeClass('hover');	
			}
		);
	});
	</script>
	<style>
	#menu {
		font-family:verdana;
		font-size:12px;
		position:relative;
		margin:0 auto;
		width:200px;
	}
	
	#menu ul {
		/* remove list style */
		list-style:none;
		padding:0;
		margin:0;	
		
		/* set the layer position */
		position:relative;
		z-index:5;
	}
	
		#menu li {
			/* set the styles */
			background:#ccc url(bg.gif) no-repeat 0 0;
			padding:5px;
			margin:2px;
			cursor:pointer;
			border:1px solid #ccc;
		}
		
		#menu li.hover {
			/* on hover, change it to this image */
			background-image:url(bg_hover.gif) !important;
		}
		
		#menu li a {
			text-decoration:none;	
			color:#888;
		}
	
	
	#menu .block {
		/* allow javascript to move the block */
		position:absolute;
		top:0;
		
		/* set the left position */
		left:150px;	
		
		/* display above the #menu */
		z-index:10;
		
		/* the image and the size */
		background:transparent url(arrow.png) no-repeat top right;
		width:39px;
		padding:4px;
		cursor:pointer;
	}
	
	/* fast png fix for ie6 */
	* html .png{
		position:relative;
		behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
	}

	
	</style>
	
</head>
<body>
<br/><br/><br/>
<div id="menu">
<ul>
	<li><a href="#">Item 01</a></li>
	<li><a href="#">Item 02</a></li>
	<li class="selected"><a href="#">Item 03</a></li>
	<li><a href="#">Item 04</a></li>
	<li><a href="#">Item 05</a></li>
	<li><a href="#">Item 05</a></li>
</ul>
<div class="block png"></div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)