javascript做导航条

最新推荐文章于 2023-07-04 11:04:04 发布

menglichen

最新推荐文章于 2023-07-04 11:04:04 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js图片移动效果 javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/menglichen/article/details/49559427

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

js图片移动效果

2 篇文章

订阅专栏

这篇博客主要介绍了如何使用JavaScript来创建和美化导航条。内容包括不同类别的样式定义，如`.active`、`.normal`和`.float_layer`，以及针对鼠标悬停效果的样式变化。还涉及到CSS定位如`.pos1`到`.pos4`，以及宽度调整 `.w1` 到 `.w4`，展示了动态导航条的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

站长之家导航特效 - 妙味课堂 - www.miaov.com window.οnlοad=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的设置结束=====