无忧源码-网页特效 为广大网页制作爱好者提供学习、交流场所。在这里你可以找到背景特效、图象特效、时间日期特效、状态栏特效等各种网页特效。这些特效可以让你的网页变得更加美丽,从而吸引更多的网友访问你的网站。

网站首页 常用软件 站长工具 网页特效 网页配色 网页模板 背景音乐 杀毒频道 娱乐频道 访客留言
  特效分类

  点击排行 更多..
  不错的下拉菜单
  实用下拉导航条
  点击图片从而改变网页背景图..
  腾讯QQ网页在线客服,随网页..
  经典实用的触发型导航菜单
  超强论坛灌水工具---写大字板..
  腾讯QQ网页在线客服,隐藏在..
  通过滤镜实现的发光字体
  非常棒的绿色下拉透明菜单
  星星从背景中飞出
  页面内的超级酷浮动窗口
  Flash和JS实现的图片幻灯片切..


  推荐特效 更多..
  仿yahoo首页特色服务内容切换..
  可关闭并且能最大化的用层模..
  数字选中放大
  模仿3D的消息,太酷了!
  可以任意编辑的动态表格(特别..
  CSS超酷网页导航实例!网页导..
  效果直逼flash的css+div+js菜..
  网易娱乐头图新闻代码,推荐..
  类似与QQ的好友之类的树型菜..
  各种用途的按钮大集合
  用CSS设计的导航实例
  用CSS实现的一张图完成的导航..
您的位置:首页 >> 网页特效 >>  导航菜单 >  折叠展开收缩效果的栏目分类导航
折叠展开收缩效果的栏目分类导航
[ 发布:wuymadmin | 来源:本站整理 | 时间:2007-11-11 22:36:39 | 次 ]      [复制]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|wuym.com/Js---可折叠展开收缩效果的栏目分类导航</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>
<body>
<table width="200" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td height="38">
  <img height="38" src="/js/img/leftlist_head.jpg" width="200" /></td>
 </tr>
 <tr>
  <td align="center" valign="top" background="/js/img/leftlist_bg.jpg">
  <script language="javascript" id="clientEventHandlersJS">
<!--
var number=8;

function LMYC() {
var lbmc;
//var treePic;
    for (i=1;i<=number;i++) {
        lbmc = eval('LM' + i);
        //treePic = eval('treePic'+i);
        //treePic.src = '/js/img/file.gif';
        lbmc.style.display = 'none';
    }
}
 
function ShowFLT(i) {
    lbmc = eval('LM' + i);
    //treePic = eval('treePic' + i)
    if (lbmc.style.display == 'none') {
        LMYC();
        //treePic.src = '/js/img/nofile.gif';
        lbmc.style.display = '';
    }
    else {
        //treePic.src = '/js/img/file.gif';
        lbmc.style.display = 'none';
    }
}
//-->
      </script>
  <table cellspacing="0" cellpadding="0" width="88%" border="0">
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(1)" href="javascript:void(null)">
    文管产品</a> </td>
   </tr>
   <tr id="LM1" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="文件夹" href="http://www.wuym.com" target="_parent">
      文件夹</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="资料册" href="http://www.wuym.com" target="_parent">
      资料册</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="档案盒" href="http://www.wuym.com" target="_parent">
      档案盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="文件盒" href="http://www.wuym.com" target="_parent">
      文件盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="文件柜" href="http://www.wuym.com" target="_parent">
      文件柜</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="公文包" href="http://www.wuym.com" target="_parent">
      公文包</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(2)" href="javascript:void(null)">
    桌面文具</a> </td>
   </tr>
   <tr id="LM2" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="削笔机" href="http://www.wuym.com" target="_parent">
      削笔机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="订书机" href="http://www.wuym.com" target="_parent">
      订书机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(3)" href="javascript:void(null)">
    商用机器</a> </td>
   </tr>
   <tr id="LM3" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="碎纸机" href="http://www.wuym.com" target="_parent">
      碎纸机</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="切纸刀" href="http://www.wuym.com" target="_parent">
      切纸刀</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(4)" href="javascript:void(null)">
    书写工具</a> </td>
   </tr>
   <tr id="LM4">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="中性笔" href="http://www.wuym.com" target="_parent">
      中性笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="圆珠笔" href="http://www.wuym.com" target="_parent">
      圆珠笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="记号笔" href="http://www.wuym.com" target="_parent">
      记号笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="白板笔" href="http://www.wuym.com" target="_parent">
      白板笔</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(5)" href="javascript:void(null)">
    纸制品</a> </td>
   </tr>
   <tr id="LM5" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="传真纸" href="http://wuym.com" target="_parent">
      传真纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="复印纸" href="http://www.wuym.com" target="_parent">
      复印纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="复写纸" href="http://www.wuym.com" target="_parent">
      复写纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="便条纸" href="http://www.wuym.com" target="_parent">
      便条纸</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="百事贴" href="http://www.wuym.com" target="_parent">
      百事贴</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="皮面笔记本" href="http://www.wuym.com" target="_parent">
      皮面笔记本</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(6)" href="javascript:void(null)">
    办公电子</a> </td>
   </tr>
   <tr id="LM6" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="计算器" href="http://www.wuym.com" target="_parent">
      计算器</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(7)" href="javascript:void(null)">
    IT周边产品</a> </td>
   </tr>
   <tr id="LM7" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="阅读架" href="http://www.wuym.com" target="_parent">
      阅读架</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="CD保护" href="http://www.wuym.com" target="_parent">
      CD保护</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="光盘盒" href="http://www.wuym.com" target="_parent">
      光盘盒</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td style="PADDING-LEFT: 20px" background height="23">
    <img height="9" src="/js/img/bit05.gif" width="8" align="absMiddle">
    <a onclick="javascript:ShowFLT(8)" href="javascript:void(null)">
    办公生活用品</a> </td>
   </tr>
   <tr id="LM8" style="DISPLAY: none">
    <td>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="清洁桶" href="http://www.wuym.com" target="_parent">
      清洁桶</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="白板" href="http://www.wuym.com" target="_parent">
      白板</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="网状文具" href="http://www.wuym.com" target="_parent">
      网状文具</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="封箱器" href="http://www.wuym.com" target="_parent">
      封箱器</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
     <tr>
      <td style="PADDING-LEFT: 40px" height="23">
      <img height="7" src="/js/img/bit06.gif" width="8" align="absMiddle">
      <a title="购物袋" href="http://www.wuym.com" target="_parent">
      购物袋</a> </td>
     </tr>
     <tr>
      <td background height="3"></td>
     </tr>
    </table>
    </td>
   </tr>
  </table>
  </td>
 </tr>
 <tr>
  <td height="17">
  <img height="17" src="/js/img/leftlist_bottom.jpg" width="200" /></td>
 </tr>
</table>
</body>
</html>



请将上面的代码复制到下面的文本框中进行预览     
         
下一个特效:已经没有了
 特效: 折叠展开收缩效果的栏目分类导航 的评论   我要评论...
 
关于本站 | 广告合作 | 免责声明 | 网站帮助 | 网站地图  | 滇ICP备06001292号

Copyright ©2005 - 2008 wuym.com.All Rights Reserved.