如何用JS或CSS制作网站导航条

html-css026

如何用JS或CSS制作网站导航条,第1张

给你一个朴素版的导航(包含css和html2部分):

css.css文件

body{

font-size:12px

font-family:Arial,

Helvetica,

sans-serif

margin:0px

padding:0px

color:white

}

ul,li{

margin:0px

padding:0px

}

li{

display:inline

list-style:none

text-align:center

font-weight:bold

float:left

}

a:link{

color:#336601

text-align:center

text-decoration:none

float:left

width:100px

padding:3px

5px

0px

5px

}

a:visited{

color:#336601

text-align:center

text-decoration:none

float:left

padding:3px

5px

0px

5px

width:100px

}

a:hover{

color:white

float:left

padding-left:6px

text-align:center

width:100px

text-decoration:none

background-color:#539D26

}

a:active{

color:white

float:left

padding:3px

3px

0px

20px

width:100px

text-align:center

text-decoration:none

background-color:#539D26

}

#nav{

width:600px

height:30px

border-bottom:0px

padding:0px

5px

position:absolute

z-index:1

left:

198px

top:

25px

}

.list{

line-height:20px

text-align:left

padding:4px

font-weight:normal

}

.menu1{

width:120px

height:auto

margin:6px

4px

0px

0px

border:1px

solid

#9CDD75

background-color:#F1FBEC

color:#336601

padding:6px

0px

0px

cursor:pointer

overflow-y:hidden

filter:Alpha(opacity=70)

-moz-opacity:0.7

}

.menu2{

width:120px

height:18px

margin:6px

4px

0px

0px

background-color:#F5F5F5

color:#999999

border:1px

solid

#EEE8DD

padding:6px

0px

0px

0px

overflow-y:hidden

cursor:pointer

}

这是当然的,页面都跳转了,样式肯定不可能自动转到刷新后的页面啦,否则的话如果我的网站通过链接跳转到百度的页面,而刚好我网站的样式与百度的重叠,那么页面就会乱糟糟了。

而前面那两个链接并没有刷新页面,还是在当前页面,肯定就有效果啦。

你应该给每个页面指定一个编号,这样在页面加载时再把对应的导航菜单叠加上active类,比如第3个页面可以这样:

var pageId=2  //2是第三个页面(从0起算)

$(function(){

   $(".nav a").removeClass("active")  //如果每个菜单默认是没有active类的,此行可省略

   $(".nav a").eq(pageId).addClass("active")

})

当然,也可以根据当前页面的文件名或其他信息来决定让哪个菜单项为当前项。总之,你不要指望在当前页面去直接控制跳转后的页面样式。

使元素固定在网页中,不需要用到JS的,只需要用到CSS样式就可以了。

使用css 中的   position:fixed fixed是相对于浏览器的定位,设置了这个样式的元素将不会随页面滚动而改变位置,固定在屏幕中。

如 :

.classname {

position:fixed

left:0

top:0

z-index:9999

}