仿淘宝阴影效果的滑动门选项卡

本栏首页分类：菜单导航层和布局背景特效 CSS相关文本链接表格相关日期时间图片特效页面综合广告代码表单及按钮计算转换游戏娱乐其它

仿淘宝阴影效果的滑动门选项卡

标签：滑动门选项卡　时间：2009-01-24　已阅读：
仿淘宝首页的一款漂亮滑动门选项卡，相信你100%喜欢，不信就运行一下看看效果，本人比较喜欢，带阴影立体效果，蓝色清新界面，真的很不错！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘宝滑动门效果</title>
<style type="text/css">
 *{ margin:0;padding:0;}
 body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text-align:center;}
 #warpper{ position:absolute; left:100px; top:100px;}
 h5{ float:left;}
 a{ text-decoration:underline; cursor:pointer; font-weight:bold;}
 dl{ height:18px; line-height:18px; background:#f7f7f7; padding:0 10px;}
 dt,.normal{ float:left; padding:0 10px; border-right:1px solid #ccc; text-decoration:none; width:auto; cursor:pointer;}
 dt.over{ position:relative;border:1px solid #86e5f0; padding:0 10px 15px 10px; border-bottom:1px solid #caf1f1; margin:-1px 0 0 -1px; z-index:1000; color:#ff6026; text-decoration:underline; background:#caf1f1; height:22px; }
 li{ float:left; list-style-type:none; margin:5px 10px; width:230px;}
 dl dd{ position:absolute; width:500px; left:0;top:37px!important; border:1px solid #86e5f0; background:#caf1f1; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120, color=#cccccc); padding:10px 0;}
 .block{ display:block;}
 .none{ display:none;}
</style>
<script language="javascript">
 function $(str){ return document.getElementById(str);}
 function $$(str){ return document.getElementsByTagName(str);}
 function changeMenu(thisObj,num){
  if(thisObj.className=="over") return false;
  var tabObj=thisObj.parentNode.getAttribute("id");
  var obj_dt=$("warpper").getElementsByTagName("dt");
  for(var i=0;i<obj_dt.length;i++){
   if(i==num){
    thisObj.className="over";
    $("c"+(i+1)).className="block";
   }
   else{
    obj_dt[i].className="normal";
    $("c"+(i+1)).className="none";
   }
  }
 }
</script>
</head>
<body>
 <dl id="warpper">
  <h5>源码导航：</h5>
  <dt onmouseover="changeMenu(this,0);">ASP.NET</dt>
  <dd id="c1" class="none">
   <ul>
    <li><a href="/soft/3168.shtml" target="_blank">X-BLOG生成静态的博客程序 v1.0</a></li><li><a href="http://www.codefans.net/soft/3165.shtml" target="_blank">VB获取计算机所有串口端口地址</a></li><li><a href="/soft/3167.shtml" target="_blank">下拉式时间控件源码VB版</a></li><li><a href="http://www.codefans.net/soft/3160.shtml" target="_blank">PHP生成3D的百分比图</a></li>
   </ul>
  </dd>
  
  <dt onmouseover="changeMenu(this,1);">PHP</dt>
  <dd id="c2" class="none">
   <ul>
    <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 随书源代码</a></li><li><a href="/soft/3173.shtml" target="_blank">可以发表情的VB聊天室面板程序</a></li><li><a href="/soft/3171.shtml" target="_blank">界面漂亮的VB版MP3播放器</a></li>
   </ul>
  </dd>
  
  <dt onmouseover="changeMenu(this,2);">JAVA</dt>
  <dd id="c3" class="none">
   <ul>
    <li><a href="/soft/3194.shtml" target="_blank">JavaScript日历选择器</a></li><li><a href="/soft/1061.shtml" target="_blank">B-check PHP探针 v0.04</a></li><li><a href="/soft/3091.shtml" target="_blank">C9 ASP静态文章系统 v1.3</a></li><li><a href="/soft/3183.shtml" target="_blank">jQuery初学实例代码集</a></li>
   </ul>
  </dd>
  
  <dt onmouseover="changeMenu(this,3);">ASP</dt>
  <dd id="c4" class="none">
   <ul>
    <li><a href="/soft/1960.shtml" target="_blank">最新IP地址库及ASP调用示例</a></li><li><a href="/soft/2993.shtml" target="_blank">VB基于API的高级文件搜索工具</a></li><li><a href="/soft/1712.shtml" target="_blank">公交线路查询带后台</a></li><li><a href="/soft/1086.shtml" target="_blank">全国邮编查询程序ASP版附数据库</a></li>
   </ul>
  </dd>
  
  <dt onmouseover="changeMenu(this,4);">AJAX</dt>
  <dd id="c5" class="none">
   <ul>
    <li><a href="/soft/2110.shtml" target="_blank">C#仿简单的CAD矢量绘图源码</a></li><li><a href="/soft/1189.shtml" target="_blank">凹丫丫ASP新闻系统 v4.7</a></li><li><a href="/soft/3014.shtml" target="_blank">Ninu 简单ASP新闻系统 v1.0</a></li>
   </ul>
  </dd>
  
  <dt onmouseover="changeMenu(this,5);">书籍</dt>
  <dd id="c6" class="none">
   <ul>
    <li><a href="/soft/2612.shtml" target="_blank">VB编写的超级卸载工具源代码</a></li><li><a href="/soft/3022.shtml" target="_blank">Modx CMS 生成HTML v0.9</a></li><li><a href="/soft/3171.shtml" target="_blank">界面漂亮的VB版MP3播放器</a></li><li><a href="/soft/3051.shtml" target="_blank">VB中的XP风格Frame容器使用示例</a></li><li><a href="/soft/3190.shtml" target="_blank">功能很强的VB个人防火墙程序</a></li><li><a href="/soft/2767.shtml" target="_blank">汉字转换为拼音的C++程序代码</a></li>
</ul>
  </dd>
 </dl>
</body>
</html>

仿淘宝阴影效果的滑动门选项卡

本类推荐代码

本类阅读排行

最新源码下载