分享
 
 
 

JS+CSS的tab选项卡型导航菜单实例

王朝学院·作者佚名  2009-06-23
窄屏简体版  字體: 小|中|大|超大  

<!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.dlstu.cn/code/attachments/month_0810/12008102915655.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.dlstu.cn/code/attachments/month_0810/12008102915655.jpg);

background-repeat: repeat-x;

}

#slidingBlock h4.menuNo {

font-weight:normal;

color: #fff;

}

#slidingBlock h4.menuOn {

background-image: url(http://www.dlstu.cn/code/attachments/month_0810/q2008102915746.jpg);

background-repeat: no-repeat;

background-position: 6px bottom;

color:#1368c2

}

#line{ width:2px; height:33px;

background-image: url(http://www.dlstu.cn/code/attachments/month_0810/32008102915822.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.dlstu.cn/code/attachments/month_0810/p2008102915853.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";}

}

}http://www.knowsky.com

</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 />

</body>

</html>

 
 
 
免责声明：本文为网络用户发布，其观点仅代表作者个人观点，与本站无关，本站仅提供信息存储服务。文中陈述内容未经本站证实，其真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行，买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开？
 干货   2023-08-06
女子4年卖2套房花700多万做美容：不但没变美脸，面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号，网友：不要回答！
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人，苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制（强混乱强眩晕强睡眠）和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情：美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观：鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营：射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山：拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁：鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道：单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野：指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵：小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵：千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上，四周的荒凉一望無際，忽然覺得，淒涼也很美
© 2005- 王朝網路 版權所有