一个简单的导航栏

来源：互联网发布：linux 发展史编辑：程序博客网时间：2024/05/16 14:49

http://www.codefans.net/jscss/code/435.shtml

<!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-Type" content="text/html; charset=gb2312" />
<title>仿站长网JS+CSS首页导航菜单</title>
<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.codefans.net/jscss/demoimg/200903/nav1.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.codefans.net/jscss/demoimg/200903/nav1.jpg);
background-repeat: repeat-x;
}
#slidingBlock h4.menuNo {
font-weight:normal;
color: #fff;
}
#slidingBlock h4.menuOn {
background-image: url(http://www.codefans.net/jscss/demoimg/200903/nav2.jpg);
background-repeat: no-repeat;
background-position: 6px bottom;
color:#1368c2
}
#line{ width:2px; height:33px;
background-image: url(http://www.codefans.net/jscss/demoimg/200903/nav5.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.codefans.net/jscss/demoimg/200903/nav4.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 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();">
ASP源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();">
PHP源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();">
.NET源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();">
JAVA源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();">
DELPHI源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();">
VC++源码</h4><div id="line"></div>
<h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();">
VB源码</h4></div>
<div class="slidingList" id="slidingList1">
<ul>
<li ><a href="http://www.codefans.net/">首页</a></li>
<li ><a href="/sort/">分类导航</a></li>
<li ><a href="/other/lastupdate.shtml">最新更新</a></li>
<li ><a href="/other/top100.shtml">下载排行</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2">
<ul>
<li > <a href="/jscss/sort/list_3_1.shtml">层和布局</a></li>
<li > <a href="/jscss/sort/list_1_1.shtml">菜单导航</a></li>
<li > <a href="/jscss/sort/list_11_1.shtml">表单及按钮</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3">
<ul>
<li ><a href="/other/lastupdate.shtml">最新更新</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList4">
<ul>
<li ><a href="/other/top100.shtml">下载排行</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList5">
<ul>
<li ><a href="/sort/">分类导航</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList6">
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企业建站</a></li><li><a href="/sort/list_1_13_1.shtml">论坛社区</a></li><li><a href="/sort/list_1_14_1.shtml">新闻文章</a></li><li><a href="/sort/list_1_145_1.shtml">博客日记</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系统</a></li><li><a href="/sort/list_1_20_1.shtml">学校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音视频</a></li><li><a href="/sort/list_1_21_1.shtml">商务商城</a></li><li><a href="/sort/list_1_18_1.shtml">查询搜索</a></li><li><a href="/sort/list_1_32_1.shtml">人才房产</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList7">
<ul>
<li><a href="/sort/list_1_27_1.shtml">网址链接</a></li><li><a href="/sort/list_1_15_1.shtml">圈子交友</a></li><li><a href="/sort/list_1_25_1.shtml">办公管理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">统计调查</a></li><li><a href="/sort/list_1_197_1.shtml">广告网赚</a></li><li><a href="/sort/list_1_17_1.shtml">上传下载</a></li><li><a href="/sort/list_1_19_1.shtml">图片相册</a></li><li><a href="/sort/list_1_23_1.shtml">主机邮件</a></li><li><a href="/sort/list_1_24_1.shtml">动画娱乐</a></li><li><a href="/sort/list_1_84_1.shtml">文件管理</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList8">
<ul>
<li><a href="/sort/list_3_103_1.shtml">聊天留言</a></li><li><a href="/sort/list_3_121_1.shtml">CMS系统</a></li><li><a href="/sort/list_3_122_1.shtml">博客日记</a></li><li><a href="/sort/list_3_106_1.shtml">新闻文章</a></li><li><a href="/sort/list_3_105_1.shtml">论坛社区</a></li><li><a href="/sort/list_3_113_1.shtml">商务商城</a></li><li><a href="/sort/list_3_104_1.shtml">企业建站</a></li><li><a href="/sort/list_3_120_1.shtml">影音视频</a></li><li><a href="/sort/list_3_117_1.shtml">办公管理</a></li><li><a href="/sort/list_3_116_1.shtml">图片相册</a></li><li><a href="/sort/list_3_124_1.shtml">人才房产</a></li><li><a href="/sort/list_3_111_1.shtml">统计调查</a></li><li><a href="/sort/list_3_110_1.shtml">搜索链接</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList9">
<ul>
<li><a href="/sort/list_5_80_1.shtml">游戏娱乐</a></li><li><a href="/sort/list_5_82_1.shtml">媒体网络</a></li><li><a href="/sort/list_5_99_1.shtml">窗体界面</a></li><li><a href="/sort/list_5_102_1.shtml">算法相关</a></li><li><a href="/sort/list_5_93_1.shtml">系统相关</a></li><li><a href="/sort/list_5_90_1.shtml">综合应用</a></li><li><a href="/sort/list_5_89_1.shtml">文件操作</a></li><li><a href="/sort/list_5_88_1.shtml">书籍源码</a></li><li><a href="/sort/list_5_101_1.shtml">初学实例</a></li><li><a href="/sort/list_5_220_1.shtml">类库组件</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList10">
<ul>
<li><a href="/sort/list_8_163_1.shtml">界面编程</a></li><li><a href="/sort/list_8_161_1.shtml">数据库应用</a></li><li><a href="/sort/list_8_166_1.shtml">报表打印</a></li><li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li><li><a href="/sort/list_8_160_1.shtml">图形处理</a></li><li><a href="/sort/list_8_159_1.shtml">网络相关</a></li><li><a href="/sort/list_8_158_1.shtml">文件操作</a></li><li><a href="/sort/list_8_157_1.shtml">系统相关</a></li><li><a href="/sort/list_8_156_1.shtml">游戏编程</a></li><li><a href="/sort/list_8_155_1.shtml">算法相关</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList11">
<ul>
<li><a href="/sort/list_10_196_1.shtml">界面编程</a></li><li><a href="/sort/list_10_194_1.shtml">数据库应用</a></li><li><a href="/sort/list_10_85_1.shtml">算法相关</a></li><li><a href="/sort/list_10_195_1.shtml">控件组件</a></li><li><a href="/sort/list_10_193_1.shtml">图形处理</a></li><li><a href="/sort/list_10_192_1.shtml">网络相关</a></li><li><a href="/sort/list_10_191_1.shtml">文件操作</a></li><li><a href="/sort/list_10_190_1.shtml">系统相关</a></li><li><a href="/sort/list_10_189_1.shtml">游戏编程</a></li>
</ul>
</div><div class="slidingList_none" id="slidingList12">
<ul>
<li><a href="/sort/list_8_163_1.shtml">界面编程</a></li><li><a href="/sort/list_8_161_1.shtml">数据库应用</a></li><li><a href="/sort/list_8_166_1.shtml">报表打印</a></li><li><a href="/sort/list_8_165_1.shtml">多媒体技术</a></li><li><a href="/sort/list_8_162_1.shtml">控件相关</a></li><li><a href="/sort/list_8_160_1.shtml">图形处理</a></li><li><a href="/sort/list_8_159_1.shtml">网络相关</a></li><li><a href="/sort/list_8_158_1.shtml">文件操作</a></li><li><a href="/sort/list_8_157_1.shtml">系统相关</a></li><li><a href="/sort/list_8_156_1.shtml">游戏编程</a></li><li><a href="/sort/list_8_155_1.shtml">算法相关</a></li>
</ul>
</div>
</div>
<br />
</body>
</html>