javascript做导航条

站长之家导航特效 - 妙味课堂 - www.miaov.com

window.onload=function(){
var oDiv=document.getElementById('nav');
var aLi=oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');

var aA=[];
var aSpan=[];
var oTimer=null;
var i=0;
for(i=0;i

nav{

width:500px;
height:36px;
padding:0 10px;
background: url(images/nav_bg.gif) repeat-x;
margin: 50px auto 0;
position: relative;
/*background: pink;*/

}

nav .adorn1{

width: 6px;
height: 36px;
background: url(iamges/nav_bg.gif) no-repeat 0 -36px;
position:absolute;
top: 0;
left: 0;
/*background: red;*/

}

nav .adorn2{

width:6px;
height: 36px;
background: url(images/nav_bg.gif) no-repeat 0 -72px;
position: absolute;
top: 0;
right: 0;

/* background: red;*/

}

nav li{

float: left;
height: 36px;
padding:0 3px 0 7px;
position: relative;
cursor: pointer;

}

nav .line {

background: url(images/active_bg.gif) no-repeat 0 -90px;

}

nav .active {

float: left;
height: 36px;
line-height: 36px;
font-size: 14px;
text-decoration: none;
color:#fff;
background: url(images/active_bg.gif) no-repeat right -40px;

}

nav .active span{

float: left;
height:36px;
line-height: :36px;
font-size: :14px;
padding:0 20px;
text-decoration: none;
color: #fff;
background: url(images/active_bg.gif) no-repeat 0 5px;

}

nav .normal {

float: left;
height: 36px;
line-height: 36px;
font-size: 14px;
text-decoration: none;
color: #fff;

}

nav .normal span {

float: left;
height: 36px;
padding: 0 20px;

}

nav .normal:hover {

background: url(images/active_bg.gif) no-repeat right -40px;

}

nav .normal:hover span {

background: url(images/active_bg.gif) no-repeat 0 5px;

}

nav .float_layer{

height: 27px;
color: #235e99;
padding: 0 10px;
background: url(images/nav_bg.gif) repeat-x 0 -162px;
position: absolute;
top: 40px;
display: none;

}

nav .arrows{

width: 7px;
height: 5px;
overflow: hidden;
background: url(iamges/active_bg.gif) no-repeat 0 -190px;
position: absolute;
top: -4px;

}

nav .decorate1{

width: 6px;
height: 27px;
background: url(images/nav_bg.gif) no-repeat 0 -108px;
position: absolute;
top: 0;
left: -6px;

}

nav .decorate2{

width: 6px;
height: 27px;
background: url(images/nav_bg.gif) no-repeat 0 -135px;
position: absolute;
top: 0;
right: -6px;

}

nav .float_layer a{

float: left;
height: 27px;
line-height: 22px;
font-size: 11px;
color: #235e99;
text-decoration: none;
background: url(images/active_bg.gif) no-repeat right -207px;
padding: 0 8px;

}

nav .float_layer a span{

float: left;
height: 18px;
padding-top: 3px;
overflow: hidden;
border-bottom: 2px solid  #cedce8;

}

nav .float_layer a:hover span{

border-bottom: 2px solid #235e99;

}

nav p{

position: absolute;
top:10px;
right: 20px;

}

nav p a{

color: #fff;
font-size: 14px;
text-decoration: none;

}

nav p a:hover{

text-decoration: underline;

}

.pos1{

left: 0;

}

.pos1 .arrows{

left: 36px;

}

.w1{

width: 245px;

}

.pos2{

left: 0;

}

.pos2 .arrows{

left: 50px;

}

.w2{

width: 260px;

}

.pos3{

left: -100px;

}

.pos3 .arrows {

left: 136px;

}

.w3{

width: 230px;

}

.pos4{

left: -100px;

}

.pos4 .arrows{

left: 136px;

}

.w4{

width: 310px;

}

===============css的设置结束=====