折りたたみメニューについて
<head>
<script type="text/javascript">
<!--
function exMenu_close(tName)
{
tMenu = document.all[tName].style;
if (tMenu.display == 'block') tMenu.display = "none";
}
function exMenu(tName)
{
tMenu = document.all[tName].style;
if (tMenu.display == 'none') {tMenu.display = "block";} else {tMenu.display = "none";}
}
// -->
</script>
<style type="text/css">
<!--
ul{margin:0px;width:164px; list-style-type:none;}
li,li a:link{height:20px; width:164px;background-color:yellow;}
#menu a:link{background-image:url(img.gif);}
#menu a:hover,#menu a:active{ background-image:url(img2.gif);}
--->
</style>
</head>
<body onload="exMenu_close('treeMenu');">
<ul>
<li id="menu"><a href="javaScript:exMenu('treeMenu')">LINK</a></li>
</ul>
<div id="treeMenu" style="display:block">
<ul>
<li><a href="./page1.html" target="right">MENU1</a></li>
<li><a href="./page2.html" target="right">MENU2</a></li>
</ul>
</div>
左がメニューで、右がメインページの左右にわけたフレームページを作成予定です。メニューには折りたたみメニューを使いたいと考えています。
http://www.flying-h.co.jp/faq/index.html
↑は折りたたみメニューではありませんが、イメージとしては同じような感じです。メニューをクリックすると、クリックしたメニューの色が変更され、維持します。そしてその下に新たなメニューが表示されます。
説明下手ですみません、わかりにくい場合はHotmailのメニューをご覧いただくと分かりやすいかも知れません、クリックするとメニューの色が変わったままの状態を維持します。
上記折りたたみメニューでは、hoverとactiveにimg2.gifを設定していますが、これではリンクとは異なる別の箇所をクリックすると元のimg.gifに戻ってしまいます。
開かれたメニューの背景画像を常にimg2.gifにしたいのですが、方法がわかりません。
JavaScriptは自分で作るだけの知識がほとんどないため、配布されているものを探し回っていますが、見つかりませんでした。このようなメニューをご存知の方、参考サイト、又は、上記スクリプトをどのように改造すればいいのかお教えいただけないでしょうか。
ちなみに、Hotmailのソースをみてみましたが、複雑すぎて自分の知識では解析不可能でした。
お手数をおかけいたしますが、よろしくお願いいたします。