jquery--动态导航二
HTML代码：
<body>
<div class="xgsm">
<p>一、理解特效导航栏：首先打开范例文件，观察特效导航栏的效果，看看实现这个特效的HTML代码是那一段。然后查看原文件夹中相关文件是否存在如：在JS文件夹中找脚本文件（也许是内嵌的），在CSS文件夹中找一下样式表（也许是内嵌的），在IMAGES文件中看一下用了那些图像文件。</p>
<p>二、移植特效导航栏：如果想把一个好的特效导航栏用于自己的网页，移植的时候你要考虑这几个方面：⒈首先将该特效用到的文件复制到自己的站点文件夹相应的位置中（脚本/样式表/图像）。⒉将HTML代码段复制到自己的页面中⒊添加对应的样式代码⒋添加对应的脚本代码。总的来说分为二部分一是移文件，二是移代码。</p>
</div>
<div id="menu1" class="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">阳光服务</a></li>
<li><a href="#">加盟代理</a></li>
<li><a href="#">在线咨询</a></li>
</ul>
<div class="cls"></div>
</div>
<div id="menu2" class="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">阳光服务</a></li>
<li><a href="#">加盟代理</a></li>
<li><a href="#">在线咨询</a></li>
</ul>
<div class="cls"></div>
</div>
</body>
js代码：
<script language="javascript">
$(document).ready(function() {
/* 1st example */
/// wrap inner content of each anchor with first layer and append background layer
$("#menu1 li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
// loop each anchor and add copy of text content
$("#menu1 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu1 li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '40px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show
}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-40px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-40px'}, 120); // move up - hide
});
/* 2nd example */
$("#menu2 li a").wrapInner( '<span class="out"></span>' );
$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '40px'}, 300); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 300); // move down - show
}, function() {
$(".out", this).stop().animate({'top': '0px'}, 300); // move up - show
$(".over", this).stop().animate({'top': '-40px'}, 300); // move up - hide
});
});
</script>
css样式：
body {
background-image: url(../images/bg.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
font-family: "微软雅黑", "宋体";
font-size: 12px;
color: #CCCCCC;
}
.cls {
clear: both;
}
a:focus { outline: none; }
.xgsm {
padding: 0px;
width: 800px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
.xgsm p {
line-height: 1.8em;
padding: 0px;
margin: 0px;
color: #666666;
}
.menu {
height: 40px;
display: block;
padding: 0px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
/* width and height of the menu items */
float: left;
overflow: hidden;
position: relative;
line-height: 40px;
text-align: center;
}
.menu ul li a {
/* must be postioned relative */
position: relative;
display: block;
width: 90px;
height: 40px;
font-family: "微软雅黑", "宋体";
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.menu ul li a span {
/* all layers will be absolute positioned */
position: absolute;
left: 0;
width: 90px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
/* hide */
top: -40px;
}
/** 1st example **/
#menu1 {
background-color: #E8E8E8;
background-image: url(../images/menu_bg.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
#menu1 ul li a {
color: #000;
}
#menu1 ul li a span.over {
color: #FFF;
}
#menu1 ul li span.bg {
/* height of the menu items */
height: 40px;
background-image: url(../images/bg_over.gif);
background-repeat: no-repeat;
background-position: center center;
}
/** 2nd example **/
#menu2 {
background: #000;
}
#menu2 ul li a {
color: #999999;
}
#menu2 ul li a span.over {
color: #000;
background-color: #f0f0f0;
}
