javaScript仿QQ展开菜单

来源：互联网发布：北京软件开发贴吧编辑：程序博客网时间：2024/05/17 07:21

先贴图：

图2（展开）：

具体代码如下：

<!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> <title>仿QQ展开菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> table{width:100px;overflow:hidden;} #control,#control table,#control table td{font-size:12px;} #control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;} #control table{width:100px;height:20px;overflow:hidden;} #control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;} #control table .tabTit{background:#E0E8B8;} #control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;} #control .testLink{font-weight:bold;font-size:12px;} .test{width:100px;background-color:#f6f6f6;overflow:hidden;} .test li{list-style:none;color:#000;font-size:13px;line-height:20px;} #control table,.test table{margin:0 auto;text-align:center;} .style1{font-size:8px;color:#fff;} </style> <mce:script language="javascript"></mce:script></head><body><div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td width="100%" align="center" class="tabTit" onClick="Effect('test');"><li id="testtab" style="float:right" mce_style="float:right"><a href="/" mce_href="">+</a></li><li style="float:left" mce_style="float:left"><a href="/" mce_href="" class="testLink">网站首页</a></li></td> </tr> </table></div><div id="test" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_80_1.shtml" mce_href="sort/list_5_80_1.shtml">游戏娱乐</a></li><li><a href="/sort/list_5_82_1.shtml" mce_href="sort/list_5_82_1.shtml">媒体网络</a></li><li><a href="/sort/list_5_99_1.shtml" mce_href="sort/list_5_99_1.shtml">窗体界面</a></li><li><a href="/sort/list_5_102_1.shtml" mce_href="sort/list_5_102_1.shtml">算法相关</a></li></ul></td> </tr> </table></div><br><div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" class="tabTit" onClick="Effect('test1');" ><li id="test1tab" style="float:right" mce_style="float:right"><a href="#" mce_href="#">+</a></li><li style="float:left" mce_style="float:left"><a href="#" mce_href="#"class="testLink">JAVA源代码</a></li></td> </tr> </table></div><div id="test1" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_93_1.shtml" mce_href="sort/list_5_93_1.shtml">系统相关</a></li><li><a href="/sort/list_5_90_1.shtml" mce_href="sort/list_5_90_1.shtml">综合应用</a></li><li><a href="/sort/list_5_89_1.shtml" mce_href="sort/list_5_89_1.shtml">文件操作</a></li></ul></td> </tr> </table></div><br><div id="control"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" class="tabTit" onClick="Effect('test2');"><li id="test2tab" style="float:right" mce_style="float:right"><a href="#" mce_href="#">+</a></li><li style="float:left" mce_style="float:left"><a href="#" mce_href="#" class="testLink">JAVA源代码</a></li></td> </tr> </table></div><div id="test2" class="test" style="display:none;" mce_style="display:none;"> <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_88_1.shtml" mce_href="sort/list_5_88_1.shtml">书籍源码</a></li><li><a href="/sort/list_5_101_1.shtml" mce_href="sort/list_5_101_1.shtml">初学实例</a></li><li><a href="/sort/list_5_220_1.shtml" mce_href="sort/list_5_220_1.shtml">类库组件</a></li></ul></td> </tr> </table></div></body></html>