仿淘宝阴影效果的滑动门选项卡_菜单导航特效

仿淘宝首页的一款漂亮滑动门选项卡，相信你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" mrc="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;}/* www.mb5u.com */
 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.mb5u.com/soft/3165.shtml" target="_blank">VB获取计算机所有串口端口地址</a></li><li><a href="/soft/3167.shtml" target="_blank">下拉式时间控件源码VB版</a></li><li><a href="http://www.mb5u.com/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="http://www.mb5u.com/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>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

仿淘宝阴影效果的滑动门选项卡_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些