網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

仿淘寶陰影效果的滑動(dòng)門選項(xiàng)卡_菜單導(dǎo)航特效

仿淘寶首頁的一款漂亮滑動(dòng)門選項(xiàng)卡，相信你100%喜歡，不信就運(yùn)行一下看看效果，本人比較喜歡，帶陰影立體效果，藍(lán)色清新界面，真的很不錯(cuò)！

<!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>淘寶滑動(dòng)門效果</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.wf0088.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>源碼導(dǎo)航：</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天生靜態(tài)的博客程序 v1.0</a></li><li><a href="http://www.wf0088.com/soft/3165.shtml" target="_blank">VB獲取計(jì)算機(jī)所有串口端口地址</a></li><li><a href="/soft/3167.shtml" target="_blank">下拉式時(shí)間控件源碼VB版</a></li><li><a href="http://www.wf0088.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.wf0088.com/soft/3173.shtml" target="_blank">可以發(fā)表情的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靜態(tài)文章系統(tǒng) v1.3</a></li><li><a href="/soft/3183.shtml" target="_blank">jQuery初學(xué)實(shí)例代碼集</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調(diào)用示例</a></li><li><a href="/soft/2993.shtml" target="_blank">VB基于API的高級(jí)文件搜索工具</a></li><li><a href="/soft/1712.shtml" target="_blank">公交線路查詢帶后臺(tái)</a></li><li><a href="/soft/1086.shtml" target="_blank">全國郵編查詢程序ASP版附數(shù)據(jù)庫</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新聞系統(tǒng) v4.7</a></li><li><a href="/soft/3014.shtml" target="_blank">Ninu 簡單ASP新聞系統(tǒng) 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編寫的超級(jí)卸載工具源代碼</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風(fēng)格Frame容器使用示例</a></li><li><a href="/soft/3190.shtml" target="_blank">功能很強(qiáng)的VB個(gè)人防火墻程序</a></li><li><a href="/soft/2767.shtml" target="_blank">漢字轉(zhuǎn)換為拼音的C++程序代碼</a></li>
</ul>
  </dd>
 </dl>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

仿淘寶陰影效果的滑動(dòng)門選項(xiàng)卡_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些