DIV+CSS_html/css_WEB-ITnoseで構成されるツリーメニュー

これは DIV+CSS+JS で構成されるツリー メニューであり、ほとんどの WIN ブラウザで互換性があります。現在実行しているのは 2 つのメニューです。追加する必要がある場合は、fc1421406a0d4ed2afe1066e49c52f9f....929d1f5ca49e04fdcb27f9465b944689 の間にコンテンツを追加し、「submenuid」に 1 を追加して確認できます。の効果。

CSS コード

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 コード

function toggleMenu(id){
element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'展開されました');
}
onload = function() {
toggleMenu('サブメニューID');