一個精彩的JS+CSS精彩導航實例

2009-06-05　來源/作者：懶人圖庫　分類：導航菜單　 «»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 一個精彩的JS+CSS精彩導航實例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
h4,div,ul,li,span{ padding:0px; margin:0px}
/* 最外面DIV的樣式 */
#slidingBlock {
width:980px;
over-flow:hidden;
margin:auto;
height:60px;
border:#ccc solid 1px;
background-image: url(http://www.cxj168.com/images/uppic/200812180856440.jpg);
background-repeat: repeat-x;
background-position: top;
}
#nav_box{
height:33px;
width:958px;
text-align:center;
margin-left: 11px;
}
#slidingBlock a{ color:#000;
}
#slidingBlock h4 {
float:left;
width:78px;
height:33px;
line-height:33px;
text-align:center;
font-size:12px;
over-flow:hidden;
float:left;
background-image: url(http://www.cxj168.com/images/uppic/200812180856440.jpg);
background-repeat: repeat-x;
}
#slidingBlock h4.menuNo {
font-weight:normal;
color: #fff;
}
#slidingBlock h4.menuOn {
background-image: url(http://www.cxj168.com/images/uppic/200812180857440.jpg);
background-repeat: no-repeat;
background-position: 6px bottom;
color:#1368c2
}
#line{ width:2px; height:33px;
background-image: url(http://www.cxj168.com/images/uppic/200812180858210.jpg);
background-repeat: no-repeat;
 float:left
}
#slidingBlock DIV.slidingList_none {
    display:none
}
#slidingBlock DIV.slidingList {
width:auto;
margin:0px;
padding:0px;
height:27px;
clear:both;
background-image: url(http://www.cxj168.com/images/uppic/200812180858590.jpg);
background-repeat: repeat-x;
line-height:27px
}
#slidingBlock DIV.slidingList ul {
    margin:0px;padding:0px; list-style:none;
}
#slidingBlock DIV.slidingList li {
float:left;
height:20px;
line-height:20px;
font-size:12px;
text-indent:20px;
}
</style>
</head>
<body>
<div   class="gqw2e0w"   id="slidingBlock">
<script language="javascript">
  function switchmodTag(modtag,modcontent,modk) {
    for(i=1; i <13; i++) {
      if (i==modk) {
        document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";}
      else {
        document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";}
    }
  }
</script><div   class="yiy2gec"   id="nav_box">
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
法規政策</h4><div   class="wga2wy0"   id="line"></div>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
政策標準</h4><div   class="masimyk"   id="line"></div>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
環保規劃</h4><div   class="okquuqo"   id="line"></div>
<h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">
環境評價</h4><div   class="iswm0my"   id="line"></div>
<h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">
環保工程</h4><div   class="wwos2ge"   id="line"></div>
<h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();">
環境監測</h4><div   class="ieiacks"   id="line"></div>
<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">
環保考試</h4><div   class="uqyagco"   id="line"></div>
<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">
環境論文</h4><div   class="0waqssa"   id="line"></div>
<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">
環境導航</h4><div   class="gci0c0g"   id="line"></div>
<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">
求職招聘</h4><div   class="eaqsgcy"   id="line"></div>
<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">
供求信息</h4><div   class="kuyao2o"   id="line"></div>
<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">
環保論壇</h4></div>
<div   id="amgiku2"   class="slidingList" id="slidingList1">
<ul>
<li ><a href="#">國家法律</a></li>
<li ><a href="/">地方法規</a></li>
<li ><a href="/">行政法規</a></li>
<li ><a href="/">部門規章</a></li>
<li ><a href="/">執法解釋</a></li>
<li ><a href="/">文件規范</a></li>
<li ><a href="/">國際公約</a></li>
<li ><a href="/">功能區劃</a></li>
</ul>
</div>
<div   id="2c0egqm"   class="slidingList_none" id="slidingList2">
<ul>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
<li  > <a href="/">第二個的</a></li>
</ul>
</div>
<div   id="g2kcsak"   class="slidingList_none" id="slidingList3">
<ul>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div>
<div   id="q00m0mu"   class="slidingList_none" id="slidingList4">
<ul>
<li> <a href="/">第4個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第4個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div>
<div   id="20aogqo"   class="slidingList_none" id="slidingList5">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="cme2ayk"   class="slidingList_none" id="slidingList6">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="ws0giu0"   class="slidingList_none" id="slidingList7">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="oaeimy0"   class="slidingList_none" id="slidingList8">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="eqsyocm"   class="slidingList_none" id="slidingList9">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="2ogy2ks"   class="slidingList_none" id="slidingList10">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="yi2iy0s"   class="slidingList_none" id="slidingList11">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div><div   id="ueyc2q0"   class="slidingList_none" id="slidingList12">
<ul>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第5個的</a></li>
<li> <a href="/">第三個的</a></li>
<li> <a href="/">第三個的</a></li>
</ul>
</div>
</div>
<br />
更多代碼請訪問 <a href="http://www.cxj168.com/" target="_blank">懶人圖庫</a>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：導航菜單