DIV+CSS构成的树型菜单

王朝html/css/js·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  举报/纠错

这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错,xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把<ul class="collapsed" id="submenuid2">......</ul>之间的内容加上去,"submenuid"加1,查看效果。

CSS代码

body {margin: 0px;padding: 0;font: 12px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background: #FFFFFF;text-align: center;}ul{margin: 0;padding: 0;list-style: none;}#treenav {margin: 10px;text-align: left;}#treenav ul li {margin: 1px 0;padding: 0;font-size: 11px;}#treenav ul.expanded {display: block;}#treenav ul.expanded,#treenav ul.collapsed {margin: 5px 10px;}#treenav ul.collapsed {display: none;}.expanded li,.collapsed li{border-bottom: 1px dashed #CCCCCC;width: 100px;}.listhead {font-weight: bold;display: block;font-size: 12px;color: #333333;background: #F1F1F1;padding: 3px;width: 120px;margin: 1px 0;}#treenav a {text-decoration: none;color: #666666;}#treenav a:hover {color: #990000;}

JS代码

function toggleMenu(id){

element = document.getElementById(id);

element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded');

}

onload = function() {

toggleMenu('submenuid');

}

举报/纠错
 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005-2025 王朝網路 版權所有 聯絡我們導航