displyを利用した階層化メニュー
メニュー見出しをクリックすれば、メニュー階層を展開／クローズできます。
displayプロパティの値”block”と”none”を利用しメニューの開閉を行う。
各種設定
メニュー見出しをクリックすれば、メニュー階層を展開／クローズできます。
displayプロパティの値”block”と”none”を利用しメニューの開閉を行う。
各種設定
Sample Source......................................................................>>>
<style type="text/css"><!--
div.top {
width:150px;background-color:#b0c4de;font-size:13px;border-bottom:2px
solid gray;
border-right:2px solid #dcdcdc;padding:3px 5mm;cursor:hand;}
div.main {width:150px;background-color:#d3d3d3;border-bottom:2px solid gray;
border-right:2px solid #b0c4de;padding:3px 10px;cursor:hand;}
div.sub1 {width:150px;margin-left:15pt;border-bottom:2px solid #c0c0c0;
padding:2px 1px;cursor:hand;}
div.sub2 {width:150px;background-color:#c0c0c0;margin-left:0;
border-bottom:1px solid #f5f5f5;padding:1px 1px;cursor:hand;}
div.sub3 {width:200px;background-color:#f5f5dc;margin-left:30px;border-bottom:2px solid gray;
border-right:2px solid #b0c4de;padding:3px 10px;cursor:hand;}
span.mx {width:100%;padding-left:10px;border-bottom:1px solid green;}
--></style>
<script Language="JavaScript"><!--
function Menu(me,obj) {
if(me.style.display != "none" || me.style.display
== "") {
me.style.display = "none";
obj.style.color = "";
} else {
me.style.display = "block";
obj.style.color = "blue";
}
}
//--></script>
</head>
<body>
<div class="top" STYLE="" onClick="Menu(D1,this)"><p>各種設定
</p></div>
<div id="D1" style="margin-left:20pt;display:none">
<div class="main" onClick="Menu(sp1,this)">ページ全体の設定</div>
<div id="sp1" class="sub1" style="display:none">
<div class="sub2" onClick="Menu(sp1a,this)">背景色の設定</div>
<div id="sp1a" class="sub3" style="display:none">
<span class="mx" onClick="document.body.style.backgroundColor
= 'lightblue';">
薄い水色に</span><br>
<span class="mx" onClick="document.body.style.backgroundColor
= 'wheat';">
薄いピンク色にwheat</span><br>
<span class="mx" onClick="document.body.style.backgroundColor
= 'white';">白色に</span>
</div>
<div class="sub2" onClick="Menu(sp1b,this)">文字色の設定</div>
<div id="sp1b" class="sub3" style="display:none">
<span class="mx" onClick="document.body.style.color
= 'blue';">青色に</span><br>
<span class="mx" onClick="document.body.style.color
= 'green';">緑色に</span><br>
<span class="mx" onClick="document.body.style.color
= 'red';">赤色に</span><br>
<span class="mx" onClick="document.body.style.color
= 'black';">黒色に</span>
</div>
<div class="sub2" onClick="Menu(sp1c,this)">その他の設定</div>
<div id="sp1c" class="sub3" style="display:none">
<span class="mx" onclick="document.body.style.border='3mm
solid green';">
ページ全体を枠で囲う</span><br>
<span class="mx" onclick="document.body.style.border='';">ページ全体の枠を解除</span>
</div>
</div>
･････（「タイトルの設定」「ソース表示の設定」は上と同じなので省略）････
</div>
end(最終更新:12/11/12)