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

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

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

如：

.classname {

position:fixed

left:0

top:0

z-index:9999

}

js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。

导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。

1、打开Dreamweaver创建新页面，输入以下代码。如图：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="

<head>

<script src="

<title>css菜单演示</title>

<!--

*{margin:0padding:0border:0}

body {

font-family: arial, 宋体, serif

font-size:12px

}

#nav {

line-height: 24px list-style-type: none background:#666

}

#nav a {

display: block width: 80px text-align:center

}

#nav a:link {

color:#666 text-decoration:none

}

#nav a:visited {

color:#666text-decoration:none

}

#nav a:hover {

color:#FFFtext-decoration:nonefont-weight:bold

}

#nav li {

float: left width: 80px background:#CCC

}

#nav li a:hover{

}

#nav li a.on{ background:#999}

#nav li ul {

line-height: 27px list-style-type: nonetext-align:left

left: -999em width: 180px position: absolute

}

#nav li ul li{

float: left width: 180px

background: #F6F6F6

}

#nav li ul a{

display: block width: 180pxw\idth: 156pxtext-align:leftpadding-left:24px

}

#nav li ul a:link {

color:#666 text-decoration:none

}

#nav li ul a:visited {

color:#666text-decoration:none

}

#nav li ul a:hover {

color:#F3F3F3text-decoration:nonefont-weight:normal

background:#C00

}

#nav li:hover ul {

left: auto

}

#nav li.sfhover ul {

left: auto

}

#content {

clear: left

}

-->

</style>

$(function(){

$("#nav li").hover(function(){

$(this).children("a").toggleClass("on")

})

function menuFix() {

var sfEls = document.getElementById("nav").getElementsByTagName("li")

for (var i=0 i<sfEls.length i++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"")

}

window.onload=menuFix

//--><!]]></script>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<li><a href="#">百度芝麻酱</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href="#">演示演示演示</a></li>

<li><a href="#">演示演示演示</a></li>

<li><a href="#">演示演示演示演示演示</a></li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

2、点击F12预览导航效果。如图：

注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11770152.html

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

发表评论

评论列表（0条）