滑动门和翻转门实现的横竖双tab标签测试页面（附源码）

双tab可以用来表现二维数据的某一个单元。所以很多情况下还是比较有用的。但是很少人用这个而已。人们少用的原因比较多。反正我是比较少见的。

此版本至少测试版，只有IE6下进行了测试。FF和IE7一定会有问题的。所以还要使用一些css hack的技巧（可以参看：http://www.cnblogs.com/JustinYoung/archive/2007/09/14/892414.html）

不多说，横向的延伸用的是滑动门技术，鼠标移上去变色用的是翻转门技术。什么这门，那门的，好像很神秘的样子，其实看看代码就知道了，也不是很难的，只是个名称而已。我还停不喜欢这些叫法的，因为把一些其实很简单的东西都叫复杂了。就像“黑话”一样。难道把一些门外面的人都忽悠晕了，自己就变成了高手吗？

源码下载(点击下发图片下载)：

下面是代码：

<!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=utf-8" />
    <meta name="Keywords" content="YES!B/S!" />
    <meta name="Description" content="This page is from http://Justinyoung.cnblogs.com" />
    <title>CSS/Javascript demo</title>
<title>Untitled Document</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
}

#container{
    background-color:#333;
    border:1px dotted green;
    width:800px;
    margin:10px auto;
    padding-bottom:10px;
}

.jui-dirBr{
    clear:both;
}

.divTab{
    width:620px;
    background-color:#fff;
    min-height:240px;
    _height:240px;
    padding:10px;
}

/*- Menu Tabs--------------------------- */

.tabs {
    margin:0;
    width:800px;
    font-size:93%;
    line-height:normal;
    height:31px;
    float:left;

}
.tabs ul {
    margin:0;
    padding:10px 10px 0 180px;
    list-style:none;
}
.tabs li {
    display:inline;
    margin:0;
    padding:0;
}
.tabs a {
    float:left;
    background:url("tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
}
.tabs a span {
    float:left;
    display:block;
    background:url("tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs a span {float:none;}
/* End IE5-Mac hack */
.tabs a:hover span {
    color:#FF9834;
}
.tabs a:hover {
    background-position:0% -42px;
}
.tabs a:hover span {
    background-position:100% -42px;
}

.tabs .selected {
    background-position:0% -42px;
    cursor:default;
}

.tabs .selected span{
    background-position:100% -42px;
    color:#FF9834;
}

/******************************/
.tabs-v {
    width:150px;
    font-size:93%;
    line-height:normal;
    float:left;
    _position:relative;
    _left:3px;
}

.tabs-v ul {
    margin:0;
    padding:30px 0 10px 10px;
    list-style:none;

}

.tabs-v li {
    margin:0 0 2px 0;
    padding:0;
}

.tabs-v a {
    background:url("tableftH_V.gif") no-repeat left top;
    margin:0;
    display:block;
    width:100%;
    text-decoration:none;
}

.tabs-v a span {
    display:block;
    background:url("tabrightH_V.gif") no-repeat right top;
    padding:7px 0px 7px 5px;
    margin-left:3px;
    color:#666;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.tabs-v a span {float:none;}
/* End IE5-Mac hack */
.tabs-v a:hover span {
    color:#FF9834;
}
.tabs-v a:hover {
    background-position:0% -26px;
}
.tabs-v a:hover span {
    background-position:100% -26px;
}

.tabs-v .selected {
    background-position: 0%  -26px;
    cursor:default;
}

.tabs-v .selected span{
    background-position: 100% -26px;
    color:#FF9834;
}
</style>
</head>

<body>
<div id="container">

<div class="tabs">
  <ul>
    <li><a href="#" title="Link 1" ><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2" class="selected"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
  </ul>
</div>

<div class="tabs-v">
  <ul>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3" class="selected"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
  </ul>
</div>

<div class="divTab">
<p>横竖双tab标签。FF需要再调整。IE6测试通过。</p>
<a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</div>
</body>
</html>

keyword:css样式表,滑动门技术,滑动门效果,css滑动门,滑动门代码,史丹利滑动门,css滑动门技术,滑动门菜单,翻转门技术,翻转门效果,css翻转门,翻转门代码,css翻转门技术,翻转门菜单

posted @ 2007-09-25 18:25 阿一(杨正祎) 阅读(3859) 评论(13) 收藏举报

刷新页面返回顶部