CSS+JQuery实现的性感漂亮导航
1.demo.html
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>
JS代码：
/**
* @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);
Js代码
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;
}
Css代码
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%;
}