CSS+JQuery实现的性感漂亮导航-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的动态导航菜单效果。通过jQuery库增强了交互体验，包括鼠标悬停和点击动画。该菜单支持多个导航项，并且能够根据不同状态应用不同的背景位置动画。

导航效果预览图：

1.demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
            
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);

var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

$(document).ready(function(){
	setBkgPos();
	
	for ( i = 0; i < nav.length; i++ ) {
		$(nav[i]).bind( 'mouseover', mMouseOver );
		$(nav[i]).bind( 'mouseout', mMouseOut );
		$(nav[i]).bind( 'click', mClick );
	}
	
	for ( i = 0; i < nav.length; i++ ) {
		// element with 慳ctive?class will  start animation 
		if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
			$(nav[i])
				.animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
					function(){ 
						$(this)
							.children()
								.animate({backgroundPosition:'(0px -40px)'},20)
								.animate({backgroundPosition:'(0px -20px)'},"fast");
						$(this)
							.animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
							.animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
						var parent = this;
						$(this)
							.children()
								.animate( {backgroundPosition:'(0px -45px)'},"fast",function(){
											$(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
											$(parent).css({backgroundImage: 'url(img/nav.png)'});
									});
					});
			break;
		}
	}
}); 

function _getHPos( id )
{
	for ( i = 0; i < nav.length; i++ ){
		if ( '#' + id == nav[i] ){
			return i*(-98);
		}
	}	
	
	return 0;
}

function setBkgPos()
{
	for ( i = 0; i < nav.length; i++ ){
		$(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
		$(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
	}
}

function mMouseOver(e)
{
	// element with 慳ctive?class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}
	
	$(this)
		// stop any animation that took place before this
		.stop()
		// step 1. change the image file
		.css({backgroundImage: 'url(img/nav-over.png)',cursor: 'pointer'})
		// step.2 move up the navigation item a bit
		.animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
			// this section will be executed after the step.2 is done
			function(){ 
				$(this)
					.children()
						// step. 3 move the white box down
						.animate({backgroundPosition:'(0px -40px)'},20)
						// step 4. move the white box down
						.animate({backgroundPosition:'(0px -20px)'},"fast");
				$(this)
					// step 4. move the navigation item down
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
					// step 5. move the navigation item to its final position
					.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
				// store the parent element id for later usage
				var parent = this;
				$(this)
					.children()
						// step 5. move the white box to its final position
						.animate( {backgroundPosition:'(0px -45px)'},"fast",
							// this section will be executed after the step.5 is done
							function(){
								// step.6 change the image to its original image	
								$(parent).css({backgroundImage: 'url(img/nav.png)'});
							});
			
			});
}

function mMouseOut(e)
{			
	// element with 慳ctive?class will ignore this event and do nothing
	if ( this.className.indexOf('active') >= 0  ){
		return;
	}
	
	$(this)
		// stop any animation that took place before this
		.stop()
		// step.1 move down navigation item
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", 
			// this section will be executed after the step.1 is done
			function(){
				// step.2 white box move really fast
				$(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
				// step 3. move navigation item up
				$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", 
					// this section will be executed after the step.3 is done
					function(){
						// step 4. move navigation item ot its original position
						$(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
							// this section will be executed after the step.4 is done
							function(){
								// move white box to its original position, ready for next animation
								$(this).children().css({ backgroundPosition:'0px -60px'});
							})
					})
			})
		.css({backgroundImage: 'url(img/nav.png)', cursor: ''});
}

function mClick(e)
{
	location.href = this.id;
}

body {
	background: url(../img/body-bkg.png) repeat scroll;
	margin: 0;
	padding: 0;
}

.container{
	margin: 0pt auto;
	width:950px;
}

#header{
	background: url(../img/hdr-bkg.png) repeat-x scroll;
	height:181px;
	position:absolute;
	z-index :100;
	top: 0px;
	left:0px;
	width:100%;
}

#navigation{
	height:60px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:80px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:171px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}	

.pri-nav a{
	display:block;
	text-decoration:none;
	text-indent:-30000px;
}

.content{
	margin-top:160px;
}

#content-title{
	background: url(../img/content-title.png) no-repeat scroll;
	height:323px;
	position:absolute;
	width:100%;
}