DIV+JS实现可展开、折叠的菜单代码

代码简介:

DIV+JS类QQ菜单,可展开折叠,小巧灵活,代码修改方便,菜单采用LI列表,用CSS可以统一去控制,有兴趣的可以再完善一下。

代码内容:

<html>
<head>
<title>DIV+JS实现可展开、折叠的菜单代码_网页代码站(www.webdm.cn)</title>
<style>
td { cursor: hand; font-family: Tahoma; background-color: #0066cc; color: #fff; font-size: 9pt; }
li { color: #FF0000; font-family: Tahoma; background-color: skyblue; font-size: 9pt;}
.up{ background-color: #3A6EA5; border: 1 solid #fff;
 }
</style>

<script>
function show(c_Str)
{if(document.all(c_Str).style.display=='none')
{document.all(c_Str).style.display='block';}
else{document.all(c_Str).style.display='none';}}
function high(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="336699"
event.srcElement.style.color="white"
}
}
function low(){
if (event.srcElement.className=="k"){
event.srcElement.style.background="99CCFF"
event.srcElement.style.color=""
}
}
</script>
</head>

<body topmargin="0" leftmargin="5">
<div align="left">
  <table border="0" width="98" cellspacing="0" cellpadding="0">
    <tr>
      <td><div class=up onclick=show("a0")>ASP代码</div><div onmouseover=high() onmouseout=low()  id=a0 

style="display:none">
<li><a href="/">菜单导航</a></li><li><a href="/">层和布局</a></li><li><a href="/">背景特效</a></li><li><a 

href="/">图片特效</a></li><li><a href="/">浏览器相关</a></li><li><a href="/">广告代码</a></li></div></td>
    </tr>
    <tr>
      <td><div class=up onclick=show("a1")>PHP源码</div><div onmouseover=high() onmouseout=low()  id=a1 

style="display:none">
<li><a href="/">日期时间</a></li><li><a href="/">文本特效</a></li><li><a href="/">表格相关</a></li><li><a 

href="/">表单及按钮</a></li><li><a href="/">计算转换</a></li><li><a href="/">游戏娱乐</a></li></div></td>
    </tr>
  </table>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/7e0ad9ae-4b86-417c-96ee-35e4fdcc3d38.html

posted @ 2011-04-18 12:24  网页代码站  阅读(1264)  评论(0编辑  收藏  举报