JavaScript小技集開閉式メニュー
開閉式ツリー型メニュー
unknown
JavaScriptを使用した開閉式のツリー型メニューです。好きなだけ階層を増やせます。
子メニューを非表示（display:none）にしておき、親テキストがクリックされた時に子メニューを表示（disabled:block）させます。 アイコンは、リストが開いている場合に「＋」、閉じている場合に「－」に変わります。 子メニューを閉じる場合は、再度、親テキストをクリックします。
サンプルを見る<style type="text/css">
ul#NodeMenu {
margin:0; padding:0;
width:250px;
list-style:none;
}
ul#NodeMenu li {
margin:5px 0; padding:0;
list-style:none;
}
ul#NodeMenu a {
text-decoration:none;
color:navy;
display:block;
padding:2px 0;
}
ul#NodeMenu a:hover {
color:orange;
}
ul#NodeMenu span.parent { /* 親テキスト */
color:navy; font-weight:bold;
background-color:#eeeeee;
}
ul#NodeMenu div.child { /* 子メニュー */
background-color:#ffffcc;
}
ul#NodeMenu div.indent {
margin-left:1em;
}
</style>
<script type="text/javascript">
/* ブラウザ判別 */
var ie=document.all ? 1 : 0;
var ns6=document.getElementById&&!document.all ? 1 : 0;
var opera=window.opera ? 1 : 0;
/* 子メニューの表示・非表示切替 */
function openFolder(childObj, parentObj){
var child="";
var parent="";
var sw="/content/img/js/show.gif"; /* フォルダ表示時のアイコン画像 */
var hd="/content/img/js/hide.gif"; /* フォルダ非表示時のアイコン画像 */
if(ie || ns6 || opera){
child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style;
parent=ns6 ? document.getElementById(parentObj) : document.all(parentObj);
if (child.display=="none"){
child.display="block";
parent.src=sw;
}else{
child.display="none";
parent.src=hd;
}
}
}
</script>
<ul id="NodeMenu">
<!-- 2階層[A] Begin -->
<li>
<img id="close_1" src="/content/img/js/hide.gif" onclick="openFolder('open_1', 'close_1')" alt="" />
<span class="parent" onclick="openFolder('open_1', 'close_1')">ctgA（2階層）</span>
</li>
<li>
<div class="indent">
<div id="open_1" class="child" style="display:none;">
<!-- [A-1] Begin -->
<ul>
<li><a href="#">・ctgA-1</a></li>
<li>
<img id="close_1_1" src="/content/img/js/hide.gif" onclick="openFolder('open_1_1', 'close_1_1')" alt="" />
<span class="parent" onclick="openFolder('open_1_1', 'close_1_1')">ctgA-2</span>
</li>
<li>
<div class="indent">
<div id="open_1_1" class="child" style="display:none;">
<ul>
<li><a href="#">・ctgA-2-1</a></li>
<li><a href="#">・ctgA-2-2</a></li>
</ul>
</div>
</div>
</li>
</ul>
<!-- node[A-1] End // -->
</div>
</div>
</li>
<!-- 2階層[A] End // -->
<!-- 3階層[B] Begin -->
<li>
<img id="close_2" src="/content/img/js/hide.gif" onclick="openFolder('open_2', 'close_2')" alt="" />
<span class="parent" onclick="openFolder('open_2', 'close_2')">ctgB（3階層）</span>
</li>
<li>
<div class="indent">
<div id="open_2" class="child" style="display:none;">
<!-- [B] Begin -->
<ul>
<li>
<a href="#">・ctgB-1</a>
<!-- [B-2] Begin -->
<ul>
<li>
<img id="close_2a" src="/content/img/js/hide.gif" onclick="openFolder('open_2a', 'close_2a')" alt="" />
<span class="parent" onclick="openFolder('open_2a', 'close_2a')">ctgB-2</span>
</li>
<li>
<div class="indent">
<div id="open_2a" class="child" style="display:none;">
<!-- [B-2-1] Begin -->
<ul>
<li><a href="#">・ctgB-2-1</a></li>
<li>
<img id="close_2aa" src="/content/img/js/hide.gif" onclick="openFolder('open_2aa', 'close_2aa')" alt="" />
<span class="parent" onclick="openFolder('open_2aa', 'close_2aa')">ctgB-2-2</span>
</li>
<li>
<div class="indent">
<div id="open_2aa" class="child" style="display:none;">
<ul>
<li><a href="#">・ctgB-2-2-1</a></li>
<li><a href="#">・ctgB-2-2-2</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">・ctgB-2-3</a></li>
</ul>
<!-- [B-2-1] End // -->
</div>
</div>
</li>
</ul>
<!-- [B-2] End // -->
</li>
</ul>
</div>
</div>
</li>
<!-- 3階層[Bs] End // -->
</ul>
-
ctgA（2階層）
-
-
ctgB（3階層）
-
開閉式ツリー型メニュー（ロールオーバーあり）
unknown
サンプルを見る<style type="text/css">
/* メニュー全体 */
div#menuA, div#menuA * { margin:0; padding:0; }
div#menuA { margin:20px; width:210px; }
div#menuA dl { list-style:none; border-top:1px solid silver; width:100%; margin:0; padding:0; }
/* カテゴリ名 */
div#menuA dt { border-width:1px; border-style:none solid solid solid; border-color:silver; }
div#menuA dt a { padding:5px 0; display:block; color:black; text-decoration:none; background:#eee url(/content/img/js/arrowinbox.gif) no-repeat right center; width:100%; }
/* カテゴリメニュー */
div#menuA dd { border-width:1px; border-style:none solid solid solid; border-color:silver; }
div#menuA dd a { text-decoration:none; display:block; background:url(/content/img/js/arrow.gif) no-repeat left center; padding:2px 0 2px 10px; color:black; }
div#menuA dd a:hover { color:#fff; background:orange url(/content/img/js/arrow_wh.gif) no-repeat left center; }
div#menuA dd a.line, div#menuA dd a.line:hover { border-bottom:1px dotted silver; }
div#menuA dd a.end, div#menuA dd a.end:hover { padding-bottom:1px; }
/* ダイレクトリンク */
div#menuA dt.direct a { display:block; color:#000; background:#fff url(/content/img/js/arrow.gif) no-repeat right center; }
div#menuA dt.direct a:hover { color:#fff; background:orange url(/content/img/js/arrow_wh.gif) no-repeat right center; }
</style>
<script type="text/javascript">
/* ブラウザ判別 */
var ie=document.all ? 1 : 0;
var ns6=document.getElementById&&!document.all ? 1 : 0;
var opera=window.opera ? 1 : 0;
/* 子メニューの表示・非表示切替 */
function openchild(childObj, parentObj) {
var parent="";
var child="";
var sw="/content/img/js/arrowinbox_on.gif"; /* 子メニューが開いてる時のアイコン */
var hd="/content/img/js/arrowinbox.gif"; /* 子メニューが閉じている時のアイコン */
if (ie || ns6 || opera) {
child=ns6 ? document.getElementById(childObj).style : document.all(childObj).style;
parent=ns6 ? document.getElementById(parentObj).style : document.all(parentObj).style;
if (child.display=="none") {
child.display="block";
child.backgroundColor="white";
parent.backgroundColor="orange";
parent.color="white";
} else {
child.display="none";
parent.backgroundColor="#eeeeee";
parent.color="black";
}
}
}
</script>
<div id="menuA">
<dl>
<!-- menu1 -->
<dt>
<a href="javascript:void(0)" id="closer_1" onclick="openchild('opener_1', 'closer_1')"> カテゴリⅠ</a>
</dt>
<dd id="opener_1" style="display:none;">
<a href="javascript:void(0)" class="line">メニューⅰ</a>
<a href="#" class="line">メニューⅱ</a>
<a href="#" class="end">メニューⅲ</a>
</dd>
<!-- menu2 -->
<dt>
<a href="javascript:void(0)" id="closer_2" onclick="openchild('opener_2', 'closer_2')"> カテゴリⅡ</a>
</dt>
<dd id="opener_2" style="display:none;">
<a href="#" class="line">メニューⅰ</a>
<a href="#" class="line">メニューⅱ</a>
<a href="#" class="end">メニューⅲ</a>
</dd>
<!-- menu3 -->
<dt class="direct"><a href="#"> カテゴリⅢ</a>
<!-- 4 -->
<dt>
<a href="javascript:void(0)" id="closer_3" onclick="openchild('opener_3', 'closer_3')"> カテゴリⅣ</a>
</dt>
<dd id="opener_3" style="display:none;">
<a href="#" class="line">メニューⅰ</a>
<a href="#" class="line">メニューⅱ</a>
<a href="#" class="end">メニューⅲ</a>
</dd>
<!-- menu5 -->
<dt class="direct"><a href="#"> カテゴリⅤ</a>
<!-- menu6 -->
<dt class="direct"><a href="#"> カテゴリⅥ</a>
</dl>
</div>