• ベストアンサー

ツリーメニューの参考サイト

いつもこちらでお世話になっております。 妊娠9ヶ月を終えようとしているにも関わらず仕事をしております。 どうしても産む前に終わらせなければならない仕事があるのです。 是非、皆様のお力を借りたいと思っております。 JavaScritp、DHTMLの超初心者なのですがツリーメニューを作成しています。以下のサイトを参考にしています。（左側メニュー） http://www.premama.jp/hyakka/ninshin/mm08.html 2枚の画像（ON,OFF）を使ったツリーメニューを探しているのですがなかなか参考サイトを見つけられず。。。 ここのサイトを参考にしているのですがうまく動作せず、他にもいろいろなサイトを見てみようと探しているのですがなかなか見つからず。もしご存知のサイトがございましたら教えていただけたらと思います。先に進まず、ずっとてこづっております。。。 勉強不足と痛感しております。

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

  • ベストアンサー
noname#56882
noname#56882
回答No.2

#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ソースで確認されてみてはどうでしょう。

ikazoozaki
質問者

お礼

ご返信ありがとうございます。 貴重なお時間をいただいたうえに、 ご丁寧なご説明で心の底から本当に感謝しております。 皆様のおかげで解決できました！ 本当にありがとうございました。

その他の回答 (2)

  • arexis
  • ベストアンサー率66% (66/99)
回答No.3

ボタンが親リストにあるタイプの、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とイベントハンドラを削除。 数字と一致するターゲットがない場合もエラーを返さないようになっています。

ikazoozaki
質問者

お礼

ご返信ありがとうございます。 貴重なお時間をいただいたうえに、 ご丁寧なご説明で心の底から本当に感謝しております。 皆様のおかげで解決できました！ 本当にありがとうございました。

noname#56882
noname#56882
回答No.1

［HIMAJIN-JavaScript］さんの「ツリーメニューII（画像）」はどうでしょうか。 http://himajin.moo.jp/menu/menu6_1.html

ikazoozaki
質問者

お礼

早速ご回答していただきありがとうございます。 教えていただいたサイトを拝見してチャレンジしてみたのですが、 1つの画像のやり方なのでてこづっています^^; 希望は・・・ ONボタンクリック⇒子メニューが表示。このときONボタン⇒OFFボタンに切り替わる。 OFFボタンクリック⇒子メニューが非表示。このときOFFボタン⇒ONボタンに切り替わる。 2枚の画像を使用して切り替えたいのですが。そんな希望をかなえてくれるサイトはご存じないでしょうか...（勉強不足ですいません。） せっかく教えていただいたのに恐縮します。 しかし、とっても勉強になりました！ 教えていただき本当にありがとうございますm(_ _)m

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ツリーメニューのアニメーションについて

    こんにちわ。 アニメーションのツリーメニューを自分のサイトで使用したいと考えております。 javascriptを参考に、取り込んでみましたが、FireFoxで動作しません。 どうやら、もともとFireFoxで動作していないようです。 このようなアニメーションのツリーメニューを使用しているサイト、ご存じの方がいましたら教えて頂けないでしょうか？ できればIE、FireFox、Opera、Safari　で動作するものか ブラウザごとに使うjavascriptを分けているサイトを教えて頂けるとうれしいです。 宜しくお願いします

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー＆ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です＞＜

  • 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

    タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか？ できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

  • ツリーメニューについて

    私はクリックすると下に文字が出るツリーメニューを使ったのですが クリックすると下に文字が出、かつフレームで二分割した右側に他のページを表示させる方法が知りたいです。 拙い説明で申し訳ありません。 HTMLタグは大体は理解していると思います。javascriptはまだよく分かっていません。 ツリーメニューも付け焼刃で使っています。 なので、参考にできそうなサイト様をお教えいただくか もしくは細かく説明していただけるとありがたいです。 サイトのURL：http://artclub.ojaru.jp/frame.html よろしくお願いします。

  • 画像を使用したツリーメニュー

    jsを使用しツリーメニューを作ろうと思っているのですが 希望のものとしてはツリーが閉じている場合は＋の画像を表示し クリックしツリーが開いている場合は－の画像が表示されるものに したいと思っております。 知識がないもので検索してみたのですが画像の切り替わるツリー メニューのサンプルがなかなか見つからず困惑しております。 そのようなサンプルや解説サイトなどご存知の方がおりましたら 是非教えてください。 できればieだけじゃなく主要ブラウザで動作するものが希望です。 宜しくお願い致します。

  • ツリー型メニューの作成

    オンマウスやクリックで展開するツリー型のメニューを作成したいと思っています。それほど複雑なものは必要としませんが、CGIやjavascriptを少し書き換える程度の知識しかありません。テンプレートのようなものを使っても、実際にやるとなると微調整など必要になるため、難しいかとも思いますが、チャレンジしたいと思います。参考になるサイトやプログラムを教えてください。

  • ツリーメニューについて

    Java Scriptのあいうえおを学んでいる最中の超初心者です。 以下のツリーメニューを作成しています。 親メニュー（画像2枚）クリックしたらon画像⇒子メニュー（テキスト）表示。 また親メニュークリックしたらoff⇒子メニュー非表示。 しかし、私が作ったツリーメニューはデフォルト（html）で強制的に開いているためか、メニューを3回ぐらいクリックしないと閉じません。手っ取り早い処置を望んでいます。ソースは以下のとおりです。 【htmlソース】 <table border="0"> <tr><td><a href="javascript:localMenu('localMenu02');"><img src="imgs/on.gif" name="localMenu02Icon"></a></td></tr> <tr><td id="localMenu02" style="display:block;"> <table border="0"> <tr><td><img src="imgs/a.gif" broder="0"><a href="a.html">ＡＢＣ</a></td></tr></table></td></tr></table> 【Java Scriptソース】 function localMenu(lyName){ if(!document.getElementById){return;} if(loadFlag != 'true'){return;} if(lMenuStockID == lyName){ document.getElementById(lyName).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; return; }else if(lMenuStockID != 'noData'){ document.getElementById(lMenuStockID).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; } document.getElementById(lyName).style.display = 'block'; document.images[lyName + 'Icon'].src = document.images[lyName + 'Icon'].src.replace('_of.','_on.'); lMenuStockID = lyName; } 上記のソースにデフォルトでオープンしてるかしてないかのフラグを追加しなければならないのですがフラグの書き方がわかりません。 勉強不足は十分に承知です。お時間がある方、フラグを教えていただけませんでしょうか？何卒よろしくお願いいたします。

  • 開閉式ツリー型メニューについて

    こちらのサイトの↓ http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=tips_node 開閉式ツリー型メニュー（ロールオーバーあり）を参考にメニューを作ったのですが、 リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。 クリックをしてメニューが開いた状態を保ちながら 次のページにも反映される様にするにはどうしたら良いでしょうか？ ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした； 誰かお願いいたします。

  • ツリーメニューについて

    フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると 開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8　こちらの05・06・63などを参考にして、 自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか？ 以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName) { 　tMenu = document.getElementById(tName).style; 　if(tMenu.display == 'none') tMenu.display = "block"; 　else tMenu.display = "none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none"> 　<li><a href="a.html" target="main">子メニュー</a></li> 　<li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」 に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか？ JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。

  • ツリーメニューでのcookieの使用方法

    いつもお世話になっております。 毎回丁寧なご回答、本当にありがとうございます。 現在、JavaScriptを利用し、ツリーメニューを作成しているのですが、 次のページに行った際や戻った際、更新を押した際に、 先程まで開いていたツリーメニューが、閉じてしまわないように、 cookieを利用し開いた状態に保ちたいと思っております。 一応、参考になるサイトがあり出来たことは出来たのですが、 そちらの方法を利用すると上記の操作を行った際に、 全てのメニューが一瞬開いてしまう現象が起きてしまいます。 一瞬全て開いた後には先程までのメニューはちゃんと記憶され開いた状態です。 今回、この「全てのメニューが一瞬開いてしまう」といのを、 なんとか直したいと思っております。 またその他に、出来る限りのブラウザに対応させたいと思っております。 JavaScriptが有効なブラウザの場合は通常通りのツリーメニュー、 無効な場合は全てが展開された状態のメニュー等。 目標としてはPCショップのドスパラ様のようなツリーメニューにしたいと思っております。 なを、メニュー部は更新の手間等を考え、 SSIを使用しインクルードしており、外部ファイルにしております。 このJavaScriptに限らず、別なJavaScriptでも結構ですので、 具体的なサイトやJavaScript自体をお書き頂けると幸いです。 今回使用したJavaScriptを作成した作者様にも伺っているのですが、 まだ返答は得られておらず、当方でも出来る限り急ぎで対処したいため、 誠に勝手ながらこちらに質問させていただきました。 何卒宜しくお願いいたします。 なお、確認ブラウザはWinXP SP2 ＆ IE6.0とFirefox2.0とNetscape 7.1です。 一応、現在参照しているJavaScriptのページを下記に記載いたします。 http://himajin.moo.jp/menu/menu1.html

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する