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

JavaScript012

如何用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

}

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>多选项切换导航菜单</title>

</head>

<style type="text/css">

#dNavBar{

background-color:#ffffff

}

#dNavBar li{

list-style-type:none

float:left

width:84px

height:28px

line-height:28px

font-size:12px

color:#FFFFFF

border:1px solid #ffffff

background:#86C2FF

text-align:center

display:block

cursor:pointer

}

#subMenu{

background:#99cc66

width:500px

border-left:1px solid #ffffff

border-right:1px solid #ffffff

height:29px

line-height:29px

color:#FFFFFF

font-size:12px

padding-left:10px

}

body {

margin: 0px

}

a:link,a:visited {

color: #FFFFFF

text-decoration: none

}

a:hover{

color: #FFFFFF

text-decoration: none

}

</style>

<script language="javascript">

function ShowMenu()

{

var barCTT=document.getElementByIdx_x("dNavBar")

var liArr=barCTT.getElementsByTagName_r("li")

var links=new Array()

links[0]="<a href='#'>当前位置：首页"

links[1]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>"

links[2]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"

links[3]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>| <a href='#'>项目五</a>"

links[4]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[5]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"

links[6]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[7]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[8]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[9]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[11]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

links[12]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"

for (i=0i<liArr.lengthi++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0

for (i=0i<allLi.lengthi++)

{

allLi[i].style.border="1px solid #ffffff"

allLi[i].style.backgroundColor="#86C2FF"

allLi[i].style.height="28px"

if (indexObj==allLi[i])

{

index=i

}

}

indexObj.style.borderBottom="0px solid #666688"

indexObj.style.backgroundColor="#99cc66"

indexObj.style.height="31px"

document.getElementByIdx_x("subMenu").innerHTML=infoArr[index]

}

</script>

<body onLoad="ShowMenu()">

<div id="dNavBar" style="float:nonewidth:560px"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>

</div>

<div id="subMenu">站务公告</div>

</body>

</html>

你是不是还有个div的id为hidden2了 但是你这里只有一个div，我已经在加了一个div id为hidden2 看看是不是你要的那种效果。

<a href="javascript:DIVShow('hidden1')">个人产品</a>

<a href="javascript:DIVShow('hidden2')">商用产品</a>

<div class="show" style="display:none" id="hidden1">

<ul class="nav_2">

<div class="jtou" style="position:relativeleft:116pxtop:-11px"></div>

<span style="float:leftcolor:#0085C3font-size:15pxfont-weight:boldheight:55pxline-height:55px">限时特惠 </span>

<li><a href="#">笔记本</a></li>

<li><a href="#">超级本</a></li>

<li><a href="#">台式机</a></li>

<li><a href="#">一体机</a></li>

<li><a href="#">Alienware游戏电脑及配件</a></li>

<li><a href="#">显示器</a></li>

</ul>

</div>

<div class="show" style="display:none" id="hidden2">asfaff</div>