This is a tree menu consisting of Div + CSS + Js. It adopts a list and complies with web standards. In most win browsers, the compatibility is good. See the results page for XHTML, I am now working on two menus. If you need to add them, you can set <ul class = "Collapsed" id = "submenuid2"> ...... </ul>. Add "submenuid" and 1 to check the effect.
CSSCode
Body {margin: 0px; padding: 0; Font: 12px "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 Code
function togglemenu (ID) {
element = document. getelementbyid (ID);
element. classname = (element. classname. tolowercase () = 'expanded '? 'Collaped': 'expanded');
}< br> onload = function () {
togglemenu ('submenuid ');
}