【 View】【收藏】【推荐】【评论】 网易滑动门TAB导航菜单 (2008-02-13 )

下载 Download：
迅雷下载(推荐)　|　本地下载(电信)

来源：预览网址：请点击运行代码

重要：当提供源代码在代码框显示时，下载和演示地址可能无效，请点击下面的运行代码查看效果！

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="screen">


<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
.ttl{height:18px;}
.ctt{
height:auto;
padding:6px;
clear:both;
border: 1px solid #CCCCCC;
}
.w936{
width:936px;
clear:both;
height: 120px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 2px;
margin-left: 0;
}
.normaltab   {
color:#1F3A87;
}
.hovertab    {
color:#FF0000;
background-color: #99CC00;
}
.dis{display:block;}
.undis{display:none;}
.tabs {
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
.tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
.tabs li {
display:inline;
margin:0;
padding:0;
cursor: pointer;
}
.tabs a {
float:left;
background:url("http://www.sincol.net/uploads/img/200801081258490.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
.tabs a span {
float:left;
display:block;
background:url("http://www.sincol.net/uploads/img/200801081259040.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
.tabs a span {float:none;}
.tabs a:hover span {
color:#FF9834;
}
.tabs a:hover {
background-position:0% -42px;
}
.tabs a:hover span {
background-position:100% -42px;
}
--></style><script type="text/javascript" language="javascript">
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
}
//-->
</script>
<div class="w936">
<div class="tb_ tabs" id="tb_">
<ul>
    <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a> </li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
<div class="undis" id="tbc_04">内容4</div>
<div class="undis" id="tbc_05">内容5</div>
<div class="undis" id="tbc_06">内容6</div>
<div class="undis" id="tbc_07">内容7</div>
<div class="undis" id="tbc_08">内容8</div>
</div>
</div>
<div class="w936">
<div class="tb_  tabs" id="tb_">
<ul>
    <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a> </li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_09">内容9</div>
<div class="undis" id="tbc_010">内容10</div>
<div class="undis" id="tbc_011">内容11</div>
<div class="undis" id="tbc_012">内容12</div>
<div class="undis" id="tbc_013">内容13</div>
<div class="undis" id="tbc_014">内容14</div>
<div class="undis" id="tbc_015">内容15</div>
<div class="undis" id="tbc_016">内容16</div>
</div>
</div>
<div class="w936">
<div class="tb_  tabs" id="tb_">
<ul>
    <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a> </li>
    <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a> </li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_017">内容17</div>
<div class="undis" id="tbc_018">内容18</div>
<div class="undis" id="tbc_019">内容19</div>
<div class="undis" id="tbc_020">内容20</div>
<div class="undis" id="tbc_021">内容21</div>
<div class="undis" id="tbc_022">内容22</div>
<div class="undis" id="tbc_023">内容23</div>
<div class="undis" id="tbc_024">内容24</div>
</div>
</div>

提示：您可以修改部分代码再运行，复制和保存功能在Firefox下无效。

网易滑动门 TAB导航菜单导航菜单

上一篇：没有了下一篇：126邮箱TAB效果(同一页面可多次使用)

来源：预览网址：请点击运行代码

上一篇：没有了下一篇：126邮箱TAB效果(同一页面可多次使用)

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称：论坛注册

服务赞助商

随机显示10条设计素材

google纵向tab滑动门代码

126邮箱TAB效果(同一页面可多次使用)

横向div+css滑动门代码 4

div+css 纵向滑动门代码

采用Table+CSS实现的TabPane选项卡

Easy Tabs js表格切换代码

jQuery的11种表格切换效果代码下载

网易滑动门TAB导航菜单

酷站 + 代码 + 滑动门代码 Tabs + 详细内容

来源： 预览网址：请点击运行代码

上一篇：没有了 下一篇：126邮箱TAB效果(同一页面可多次使用)

共有 0 位酷友发表了评论, 点此查看全部 酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称： 论坛注册 密码： 匿名?

服务赞助商

随机显示10条设计素材

来源：预览网址：请点击运行代码

上一篇：没有了下一篇：126邮箱TAB效果(同一页面可多次使用)

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

昵称：论坛注册