折りたたみメニューについて

2008/05/16 19:58

このQ&Aのポイント

折りたたみメニューを使いたいと考えています。
折りたたみメニューでは、クリックしたメニューの色が変更され、新たなメニューが表示されます。
開かれたメニューの背景画像を常に変更したいのですが、方法がわかりません。

折りたたみメニューについて

<head> <script type="text/javascript">  </script> <style type="text/css">  </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のソースをみてみましたが、複雑すぎて自分の知識では解析不可能でした。お手数をおかけいたしますが、よろしくお願いいたします。

MASTER-PPC
お礼率94% (52/55)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/05/17 12:46 回答No.1

ちょっと作ってみました。 hoge.htm,hoge.css(css用),hoge.js(javascript用) ,active.gif(アクティブな背景),passive.gif(パッシブな背景) という５つのファイルをご用意ください。 //hoge.htm <html> <head> <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head> <body> <ul id="menu"> <li> <div><a href="#">LINK1</a></div> <ul> <li><a href="./page1.html" target="right">MENU1-1</a></li> <li><a href="./page2.html" target="right">MENU1-2</a></li> </ul> </li> <li> <div><a href="#">LINK2</a></div> <ul> <li><a href="./page3.html" target="right">MENU2-1</a></li> <li><a href="./page4.html" target="right">MENU2-2</a></li> </ul> </li> </ul> </body> </html> //hoge.css #menu,#menu ul{ margin:0px; padding:0px; } #menu li{ list-style-type:none; } #menu li a{ height:20px; width:164px; display:block; text-decoration:none; background-image:url(passive.gif); } .hidden{ display:none; } #menu li .active a,#menu li a:hover{ background-image:url(active.gif); } //hoge.js window.onload=init; function init(){ var menu=document.getElementById("menu"); var c=menu.firstChild; while(c){ if(c.nodeName=="LI"){ var cc=c.firstChild; while(cc){ if(cc.nodeName=="UL"){cc.className="hidden";} if(cc.nodeName=="DIV"){cc.onclick=changemenu;} cc=cc.nextSibling; } } c=c.nextSibling; } } function changemenu(){ this.className=this.className=="active"?"":"active"; var n=this.nextSibling; while(n){ if(n.nodeName=="UL") n.className=n.className=="hidden"?"":"hidden"; n=n.nextSibling; } return false; }

質問者