|
现在网站主流的导航一般有选项卡式导航和下拉菜单导航，网上介绍的很多，但大都代码繁多，下面银众网络介绍一款比较简易的选项卡式导航菜单，代码极为简洁。
<script type=text/javascript>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
/*下面是css代码，简易集成网站时把css代码分离出去，增加代码的简洁性*/
<style type="text/css">
#top {
background-image: url(x01.jpg);
background-repeat: no-repeat;
height: 120px;
width: 990px;
}
#top #logo {
float: left;
height: 87px;
width: 191px;
margin-top:20px;
}
#top .top2 {
height: 55px;
width: 100px;
float:right;
margin-right:20px;
}
/*Tab1*/
#lib_Tab1{
float: right;
height: 25px;
width: 700px;
margin-right: 5px;
margin-bottom: 0px;
margin-top:15px;
}
/*Tab2*/
.lib_tabborder{
}
.lib_Menubox {
height:30px;
line-height:30px;
background-position: left top;
position:relative;}
.lib_Menubox ul{
width:100%;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
left:0;
height:30px;
text-align:center;
background-position: right top;
}
.lib_Menubox ul a{
text-decoration:none;
color:#FFF;
}
.lib_Menubox li{
float: left;
display: block;
cursor: pointer;
width: 73px;
font-weight: bold;
margin-right: 2px;
height: 30px;
line-height: 30px;
font-size: 10pt;
border-left-style: dotted;
border-left-width: 1px;
border-left-color: #B6B6B6;
}
.lib_tabborder li span{
width:100%;
height: 30px;
display:block;
line-height: 30px;
text-align:center;
}
li.tit_bj_left{
width:12px;
background-position: left top;
}
.lib_Menubox li.hover{
padding:0px;
width:73px;
color:#333;
background-position: center top;
}
.lib_Contentbox{
clear: both;
margin-top: 0px;
border-top: none;
height: 25px;
text-align: center;
}
/*内容区*/
.text_div{
width:98%;
height:auto;
display:block;
overflow:hidden;
text-decoration:none;
text-align:left;
}
.text_div li{
list-style:none;
}
.text_div a{
text-decoration:none;
color:#999;
}
</style>
</head>
<body>
<div id="top">
<div id="logo"><img src="logo.jpg" /></div>
<div class="top2"><img src="tmpic03.gif" /></div>
<div class="top2"><img src="tmpic02.gif" /></div>
<div class="top2"><img src="tmpic01.gif" /></div>
<div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
<li id="one1" onmouseover="setTab('one',1,10)" ><a href="" >首页</a></li>
<li id="one2" onmouseover="setTab('one',2,10)"><a href="#">栏目</a></li>
<li id="one3" onmouseover="setTab('one',3,10)"><a href="#">栏目</a></li>
<li id="one4" onmouseover="setTab('one',4,10)"><a href="#">栏目</a></li>
<li id="one5" onmouseover="setTab('one',5,10)"><a href="#">栏目</a></li>
<li id="one6" onmouseover="setTab('one',6,10)"><a href="#">栏目</a></li>
本文由虚拟主机域名注册服务商 银众网络(http://www.yinzhong.net) 整理，如需转载，请保留来源。
(责任编辑：admin) |
