如何用JS做固定在网页中的导航条

JavaScript016

如何用JS做固定在网页中的导航条,第1张

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

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

如 ：

.classname {

position:fixed

left:0

top:0

z-index:9999

}

1.首先将以下代码插入到你body需要设置导航的地方

<div id="navmenu">

<ul id="navi">

<li><a href="index.htm" _fcksavedurl="index.htm">梧桐首页

</a></li>

<li><a href="index1.htm" _fcksavedurl="index1.htm">网站优化

</a></li>

</ul>

</div>

<script type="text/javascript" language="javascript">

var nav = document.getElementById("navi")

var links = nav.getElementsByTagName("li")

var lilen = nav.getElementsByTagName("a")//判断地址

var currenturl = document.location.href

var last = 0

for (var i=0i<links.lengthi++)

{

var linkurl = lilen[i].getAttribute("href")

if(currenturl.indexOf(linkurl)!=-1)

{

last = i

}

}

links[last].className = "navon" //高亮代码样式

</script>

2.然后将以下CSS代码添加到你网站的CSS文件中

#navmenu{ width:980px}

#navmenu ul{ padding:0pxmargin:0px}

#navmenu ul li{ float:leftwidth:80pxlist-style:none

text-align:centerheight:30pxline-height:30px}

.navon{ background:#000000} .navon a{ color:#ffffff}

看下这个吧，JS跟简单。但是没有JS，更没有DW，写不了。

给你一个朴素版的导航(包含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

}