搜索
编程论坛 → WEB开发 → 『 JavaScript论坛 』 → JS+CSS 一个精彩的导航实例(超酷)
标题：JS+CSS 一个精彩的导航实例(超酷)
只看楼主
小林阿星
Rank: 1
等　级：新手上路
帖　子：2
专家分：0
注　册：2010-5-16
楼主
 问题点数：0 回复次数：4 
JS+CSS 一个精彩的导航实例(超酷)
运行后的效果:http://www.
程序代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. 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.);
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.);
background-repeat: repeat-x;
}
#slidingBlock h4.menuNo {
font-weight:normal;
color: #fff;
}
#slidingBlock h4.menuOn {
background-image: url(http://www.);
background-repeat: no-repeat;
background-position: 6px bottom;
color:#1368c2
}
#line{ width:2px; height:33px;
background-image: url(http://www.);
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.);
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 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 id="nav_box">
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();">
法规政策</h4><div id="line"></div>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();">
政策标准</h4><div id="line"></div>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();">
环保规划</h4><div id="line"></div>
<h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();">
环境评价</h4><div id="line"></div>
<h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();">
环保工程</h4><div id="line"></div>
<h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();">
环境监测</h4><div id="line"></div>
<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">
环保考试</h4><div id="line"></div>
<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">
环境论文</h4><div id="line"></div>
<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">
环境导航</h4><div id="line"></div>
<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">
求职招聘</h4><div id="line"></div>
<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">
供求信息</h4><div id="line"></div>
<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">
环保论坛</h4></div>
<div 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 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 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 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 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 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 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 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 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 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 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 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. target="_blank">爱8899</a>
</body>
</html>

在线演示地址:http://www.

本人觉得不错,分享给大家,应该对大家有很大帮助!
 

[ 本帖最后由 小林阿星 于 2010-5-16 14:54 编辑 ]
搜索更多相关主题的帖子: 导航　实例　CSS　
2010-05-16 14:52
边城将军
Rank: 1
等　级：新手上路
帖　子：4
专家分：3
注　册：2010-5-21
第 2 楼
 得分:0 
顶个,,,,,
2010-05-22 00:51
qingshuiliu
Rank: 10Rank: 10Rank: 10
等　级：贵宾
威　望：17
帖　子：323
专家分：1538
注　册：2009-12-28
第 3 楼
 得分:0 
效果不错，顶一下！
2010-05-27 15:41
笨笨林
Rank: 6Rank: 6
等　级：贵宾
威　望：21
帖　子：482
专家分：408
注　册：2007-7-28
第 4 楼
 得分:0 
效果不错，要是能延时就更完美了。鼠标移上去0.2秒或其它时间以后才切换。不致于鼠标划过时就切换菜单了。

还是一个。

程序授权说明：http://www./authorization.php　　无路难开路更难。 　帮助别人是快乐的，也只有帮助别人，才能得到别人的帮助。互相帮助，才能共同进步。
2010-05-29 06:40
爪哇死苦力
Rank: 2
等　级：论坛游民
帖　子：7
专家分：54
注　册：2010-6-7
第 5 楼
 得分:0 
不错，顶个.
2010-06-07 06:36



参与讨论请移步原网站贴子：https://bbs.bccn.net/thread-306868-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.473269 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved