- ベストアンサー
ツリーメニューの参考サイト
いつもこちらでお世話になっております。 妊娠9ヶ月を終えようとしているにも関わらず仕事をしております。 どうしても産む前に終わらせなければならない仕事があるのです。 是非、皆様のお力を借りたいと思っております。 JavaScritp、DHTMLの超初心者なのですがツリーメニューを作成しています。以下のサイトを参考にしています。（左側メニュー） http://www.premama.jp/hyakka/ninshin/mm08.html 2枚の画像（ON,OFF）を使ったツリーメニューを探しているのですがなかなか参考サイトを見つけられず。。。 ここのサイトを参考にしているのですがうまく動作せず、他にもいろいろなサイトを見てみようと探しているのですがなかなか見つからず。もしご存知のサイトがございましたら教えていただけたらと思います。先に進まず、ずっとてこづっております。。。 勉強不足と痛感しております。
- ikazoozaki
- お礼率90% (10/11)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#1です。 画像の入れ替えが行われるものがお入用でしたのですね。失礼いたしました。 色々と検索してみたのですが、なかなかご希望されているものが見つからず…。 http://www.beasys.co.jp/dev2dev/products/wlworkshop81/articles/patadia.html http://www.intra-mart.jp/apilist/v60/page_base/logic/tree_view.html などが当てはまるかなぁ、と思いました。（的外れでしたら大変申し訳ありません） 参考にあげられているサイトさんでは ww.premama.jp/common/js/localmenu.js（直接リンクは避けます） の「/*妊娠～」から下に当てはまると思います。 あとはHTMLソースで確認されてみてはどうでしょう。
その他の回答 (2)
- arexis
- ベストアンサー率66% (66/99)
ボタンが親リストにあるタイプの、1階層ツリーのオープンクローズで良いですか？ 参考用の単純なHTML構造のものを書いておきます。 <html><head> <style type="text/css"> .slist { display:none; } .m_img { cursor:pointer; } .flist { cursor:pointer; } </style> <script language="javascript"> function byID(_id){ var el; if(document.getElementById){ return document.getElementById(_id); } if(document.all){ return document.all(_id); } } function OC(num){ if(byID('cont'+num) && byID('menu_img'+num)){ var li = byID('cont'+num).style; if(li.display != 'block'){ //開く li.display = 'block'; byID('menu_img'+num).src = './on.gif'; }else{ //閉じる li.display = 'none'; byID('menu_img'+num).src = './off.gif'; } } } </script> </head><body> <img id="menu_img1" class="m_img" src="off.gif" onclick="OC(1)"><span id="list1" class="flist" onclick="OC(1)">メニュー１</span> <div id="cont1" class="slist"> アンカーリンクのリスト<br> アンカーリンクのリスト<br> </div> <br> <img id="menu_img2" class="m_img" src="off.gif" onclick="OC(2)"><span id="list2" class="flist" onclick="OC(2)">メニュー２</span> <div id="cont2" class="slist"> アンカーリンクのリスト<br> アンカーリンクのリスト<br> </div> </body></html> 各メニューブロック部分の専用数字付部分は。 menu_img1、list1、cont1、OC(1) の4箇所。 ブロックを増やす場合は、新しいブロックには新しい数字を入れる。配列じゃないので連番の必要はないです。 画像だけクリックにしたいなら、list の方のCSSとイベントハンドラを削除。 数字と一致するターゲットがない場合もエラーを返さないようになっています。
お礼
ご返信ありがとうございます。 貴重なお時間をいただいたうえに、 ご丁寧なご説明で心の底から本当に感謝しております。 皆様のおかげで解決できました！ 本当にありがとうございました。
［HIMAJIN-JavaScript］さんの「ツリーメニューII（画像）」はどうでしょうか。 http://himajin.moo.jp/menu/menu6_1.html
お礼
早速ご回答していただきありがとうございます。 教えていただいたサイトを拝見してチャレンジしてみたのですが、 1つの画像のやり方なのでてこづっています^^; 希望は・・・ ONボタンクリック⇒子メニューが表示。このときONボタン⇒OFFボタンに切り替わる。 OFFボタンクリック⇒子メニューが非表示。このときOFFボタン⇒ONボタンに切り替わる。 2枚の画像を使用して切り替えたいのですが。そんな希望をかなえてくれるサイトはご存じないでしょうか...（勉強不足ですいません。） せっかく教えていただいたのに恐縮します。 しかし、とっても勉強になりました！ 教えていただき本当にありがとうございますm(_ _)m
お礼
ご返信ありがとうございます。 貴重なお時間をいただいたうえに、 ご丁寧なご説明で心の底から本当に感謝しております。 皆様のおかげで解決できました！ 本当にありがとうございました。