多级动感的带下一级的导航菜单

阅读导航

推荐文章

内　　容

　　运行看到效果后，可以点向下箭头展开表格，点向上按钮可以收缩表格！希望对您有用！

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.knowsky.com</title> <script language="javascript"> function tablecollapse() { /* Variables */ var collapseClass='footcollapse'; var collapsePic='http://www.knowsky.com/upfiles/20070619/20070619214338_arrow_up.gif'; var expandPic='http://www.knowsky.com/upfiles/20070619/20070619214348_arrow_down.gif'; var initialCollapse=true; // loop through all tables var t=document.getElementsByTagName('table'); var checktest= new RegExp("(^|\\s)" collapseClass "(\\s|$)"); for (var i=0;i<t.length;i ) { // if the table has not the right class, skip it if(!checktest.test(t[i].className)){continue;} // make the footer clickable t[i].getElementsByTagName('tfoot')[0].onclick=function() { // loop through all bodies of this table and show or hide // them var tb=this.parentNode.getElementsByTagName('tbody'); for(var i=0;i<tb.length;i ) { tb[i].style.display=tb[i].style.display=='none'?'':'none'; } // change the image accordingly var li=this.getElementsByTagName('img')[0]; li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic; } // if the bodies should be collapsed initially, do so if(initialCollapse) { var tb=t[i].getElementsByTagName('tbody'); for(var j=0;j<tb.length;j ) { tb[j].style.display='none'; } } // add the image surrounded by a dummy link to allow keyboard // access to the last cell in the footer var newa=document.createElement('a'); newa.href='#'; newa.onclick=function(){return false;} var newimg=document.createElement('img'); newimg.src=initialCollapse?expandPic:collapsePic; var tf=t[i].getElementsByTagName('tfoot')[0]; var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1]; newa.appendChild(newimg); lt.insertBefore(newa,lt.firstChild); } } // run tablecollapse when the page loads window.onload=tablecollapse; </script> <style type="text/css"> body{ font-family:Arial,Sans-Serif; font-size:90%; background:#cc9; } #boundary{ background:#f8f8f8; padding:2em; width:40em; } h1{ font-family:"Trebuchet MS",Sans-serif; text-transform:uppercase; color:#696; font-size:120%; } table.footcollapse{ width:30em; } table.footcollapse caption{ font-size:120%; text-transform:uppercase; text-align:left; padding:.5em 1em; } table.footcollapse th{ text-align:left; } table.footcollapse,table.footcollapse th,table.footcollapse th { border:none; border-collapse:collapse; } table.footcollapse thead th { width:10em; border-style:solid; border-width:1px; border-color:#cff #69c #69c #cff; background:#9cf; padding:2px 10px; } table.footcollapse tfoot th, table.footcollapse tfoot td { border-style:solid; border-width:1px; border-color:#9cf #369 #369 #9cf; background:#69c; padding:2px 10px; } table.footcollapse tbody{ background:#ddd; } table.footcollapse tbody td{ padding:5px 10px; border:1px solid #999; } table.footcollapse tbody th{ padding:2px 10px; border:1px solid #999; border-left:none; } table.footcollapse tbody tr.odd{ background:#ccc; } table.footcollapse tfoot td img{ border:none; vertical-align:bottom; padding-left:10px; float:right; } </style> </head> <body> <table summary="CDs I listened to recently" class="footcollapse"> <caption>My recent CDs</caption> <thead> <tr> <th>Title</th> <th>Artist</th> <th>Quality</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td colspan="2">5 CDs</td> </tr> </tfoot> <tbody> <tr> <th>Front 242</th> <td>Front By Front</td> <td>Quite OK</td> </tr> <tr class="odd"> <th>Miss Kittin</th> <td>i.com</td> <td>good buy</td> </tr> <tr> <th>Die Fantastischen Vier</th> <td>Viel</td> <td>Nice comeback</td> </tr> <tr class="odd"> <th>Nine Inch Nails</th> <td>With Teeth</td> <td>Oh yes, finally a new one</td> </tr> <tr> <th>Garbage</th> <td>Bleed like me</td> <td>Needs more listening</td> </tr> </tbody> </table> <table summary="DVDs I watched recently" class="footcollapse"> <caption>My recent DVDs</caption> <thead> <tr> <th>Title</th> <th>Quality</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>5 DVDs</td> </tr> </tfoot> <tbody> <tr> <th>Star Trek TNG Season 7</th> <td>They lost it</td> </tr> <tr class="odd"> <th>Big Fish</th> <td>Wonderful Tale</td> </tr> <tr> <th>Closer</th> <td>I want my time back!</td> </tr> <tr class="odd"> <th>Hot Shots</th> <td>Always worth it</td> </tr> <tr> <th>The Party</th> <td>A shame there is not more Sellers</td> </tr> </tbody> </table> </body> </html> <div style="height:3px;"> </div> <script src='http://www.365code.com/plus/ad_js.php?aid=20' language='javascript'></script><br> <script src='http://www.365code.com/plus/ad_js.php?aid=21' language='javascript'></script> </DIV> <DIV class=dodo2> <DIV class=dodo3> <DIV class=dodo3a><div class="cupage"> <a href='#'>上一页</a><strong>1</strong><a href='13749_2.html'>2</a> <a href='13749_2.html'>下一页</a> </div></DIV> </DIV> </DIV> <script src='http://www.365code.com/plus/ad_js.php?aid=22' language='javascript'></script> <br> <script src='http://www.365code.com/plus/ad_js.php?aid=23' language='javascript'></script> <DIV class=doxg> <DIV class=dobg> <DIV class=dobg1>相关文章</DIV> <DIV class=dobg2> <UL> <li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13896.html'>超酷的新浪新闻频道的图片切换特效提供代码</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13895.html'>第29届奥林匹克运动会网站图片切换特效</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13894.html'>超酷随鼠标而飞动的时钟--时钟还是走动的</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13893.html'>三个下拉框分别显示当前的年、月、日，这在web编程时非常有用</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13892.html'>始终在页面右下脚的浮动的时钟</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13891.html'>星期查询！可设置任意、年、月、日</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13890.html'>输入你的出生年份,可以自动算出你的属相</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13889.html'>带显示走动时间的超级酷挂历</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13888.html'>语言时钟,不过是用英语提示当前大约的时间啊</a></li><li>☉ <a href='http://edu.365code.com/wyzz/wytx/20080307/13887.html'>真正的万年历(挺酷的!)</a></li> </UL></DIV><BR></DIV></DIV> </DIV></DIV></DIV> <DIV id=footer> <DIV class=foot> <DIV> <SCRIPT src="http://www.365code.com/img/foot.js"></SCRIPT> </DIV></DIV> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-3851688-1"); pageTracker._setDomainName("365code.com"); pageTracker._initData(); pageTracker._trackPageview(); </script> </DIV></BODY></HTML>