导航效果预览图:
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%;
}
- 大小: 30.9 KB
分享到:
相关推荐
html+jquery+CSS实现最简单的右侧导航栏效果
html+css+jquery实现侧边栏的滑入滑出 分为两种模式 第一种是hover实现, 第二种是jquery实现
使用CSS+jQuery实现的水平二级菜单 使用CSS+jQuery实现的水平二级菜单
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 ...
DIV+CSS+JQUERY源码实例
HTML+css+jQuery实现导航栏效果--pc端 适合前端,下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') //...
《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们...
非常漂亮的页面导航代码,纯CSS+JQUERY 非常漂亮的页面导航代码,纯CSS+JQUERY 非常漂亮的页面导航代码,纯CSS+JQUERY
用css和jquery做的导航,可以有N级子目录。下载后点击html文件可以查看效果。
使用html+css+js+jquery实现小米官网首页
最近做的一个模板(主页),运用到DIV+CSS+JQUERY 都是最新技术 呵呵 分享一下
css+jquery实现最简单轮播图效果html代码
华丽设计DIV+CSS+JQuery模板
css+jquery实现最简单标签页效果html代码,效果很好
HTML+CSS+JavaScript+JQuery+JSP学习笔记为本人看各种教程视频记录下来的,希望对大家有帮助。
XSLT+CSS+JQuery+WebService实现网站 分离到底!用XML+XSLT+CSS+JQuery+WebService组建Asp.Net网站,数据库采用的是Access(在App_Data下) 使用这种方案建站的人依然寥寥无几,大家还都在抱着Web标准化不撒手,其实...
js+css+jquery js+css+jquery js+css+jquery js+css+jquery