- 締切済み
画像を使用したツリーメニュー
jsを使用しツリーメニューを作ろうと思っているのですが 希望のものとしてはツリーが閉じている場合は＋の画像を表示し クリックしツリーが開いている場合は－の画像が表示されるものに したいと思っております。 知識がないもので検索してみたのですが画像の切り替わるツリー メニューのサンプルがなかなか見つからず困惑しております。 そのようなサンプルや解説サイトなどご存知の方がおりましたら 是非教えてください。 できればieだけじゃなく主要ブラウザで動作するものが希望です。 宜しくお願い致します。
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- cieux
- ベストアンサー率22% (100/443)
中は詳しく見ていませんが、サンプル画面を見た感じですと、画像を置き換えたら実現できそうです。 http://jsm.suepon.com/script/jsm30.html
関連するQ&A
- ツリーメニューのアニメーションについて
こんにちわ。 アニメーションのツリーメニューを自分のサイトで使用したいと考えております。 javascriptを参考に、取り込んでみましたが、FireFoxで動作しません。 どうやら、もともとFireFoxで動作していないようです。 このようなアニメーションのツリーメニューを使用しているサイト、ご存じの方がいましたら教えて頂けないでしょうか？ できればIE、FireFox、Opera、Safari で動作するものか ブラウザごとに使うjavascriptを分けているサイトを教えて頂けるとうれしいです。 宜しくお願いします
- 締切済み
- JavaScript
- ツリーメニューでの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
- ベストアンサー
- JavaScript
- Javascriptでのツリーメニュー表示について
Javascriptを利用して、ホームページ上でツリーメニューを表示させようと思っています。 以下のページのサンプルを元にしています。 【解説ページ】http://www.openspc2.org/reibun/javascript/mouse/063/index.html 上記は、１ページ毎に記述するタイプでテキストベースとなっております。 私は、はじめにツリーを展開するボタンをgif画像で作成し、それをクリックした際に画像の下にテキストベースのリンク文字が表示されるようにしたいと考えました。 また、それらは外部のｊｓファイルでの管理をしたいと思います。 まず、下記の構文を外部ｊｓファイルで作成し<head>内でファイルの読み込みを行いました。 【↓clickmenu.js↓】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } 次に、下記のタグの部分も外部ｊｓファイルで読み込みたいと思っています。 <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト<br>～</div>まで この実際のボタン部分も外部ｊｓで読み込みたいと思う理由は、ページ数が非常に多く、メニューの追加や削除を、１つのファイルでどうしても管理したいからです。 フレームを利用せず、Javascriptでも同じ事が可能であることはわかったのですが、タグの部分がうまく外部ファイルにできなくて、表示が真っ白になってしまいます。 document.write('<a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト<br>'); のように、１行ずつ書いているのですが、hrefにjavaScriptを指定すると表示が消えてしまいます。 必ずこの型でというわけではないのですが、何とかうまく外部ファイルでボタン部分を表示させる方法がありませんでしょうか。ご教授願います。
- ベストアンサー
- JavaScript
- 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい
タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか？ できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。
- 締切済み
- JavaScript
- ツリーメニューについて
フレームページで、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では動作確認済みです。よろしくお願いします。
- ベストアンサー
- JavaScript
- ツリー式メニュー
自分のＨＰ内にツリー式メニュ―（三段）を設置したいんですが、 クリックしていくごとに↓のように表示されるものを 作りたいんです。 ■メニュー ┣■Ａ ┃ ┣■リンク１ ┃ ┣■リンク２ ┣■Ｂ ┃ ┣■リンク３ ┃ ┣■リンク４ ┃ ちなみに■部分は画像を使っています。 二段目までのツリー表示は出来るんですが…。 どなたか分かる方、お願いします。
- 締切済み
- JavaScript
- ツリー型、階層型メニューが重なってしまう
自分でHPを開設していて困った事があるのですが、 ツリーメニューを複数使用する場合に、重なってしまい困っています。 メニュー１ ├説明 ├掲示板 ├○○ ├○○ └戻る メニュー２ ├メイン ├リンク └戻る ↑のように表示させたいのですが、メニュー１を開いた時にメニュー２に重なってしまい困っています。 他のサイトさんを調べてみると、メニュー１をクリックした時、メニュー２がちゃんと下にずれているのですが…。 どなたか解決策をご存知でしたら是非教えていただきたいです。 ヒントでも構いません＞＜
- 締切済み
- その他（インターネット・Webサービス）
- ツリーメニューの参考サイト
いつもこちらでお世話になっております。 妊娠9ヶ月を終えようとしているにも関わらず仕事をしております。 どうしても産む前に終わらせなければならない仕事があるのです。 是非、皆様のお力を借りたいと思っております。 JavaScritp、DHTMLの超初心者なのですがツリーメニューを作成しています。以下のサイトを参考にしています。（左側メニュー） http://www.premama.jp/hyakka/ninshin/mm08.html 2枚の画像（ON,OFF）を使ったツリーメニューを探しているのですがなかなか参考サイトを見つけられず。。。 ここのサイトを参考にしているのですがうまく動作せず、他にもいろいろなサイトを見てみようと探しているのですがなかなか見つからず。もしご存知のサイトがございましたら教えていただけたらと思います。先に進まず、ずっとてこづっております。。。 勉強不足と痛感しております。
- ベストアンサー
- JavaScript
- 画像ファイルに表示される印刷メニューを表示させたくない場合
Webサーバに置いている画像ファイルをブラウザ（IE)で表示させると、マウスポインタを当てたとき、印刷メニューが左上に表示されるものとされないものがあるのですが、これらはどう違うのでしょうか。どのブラウザで見てもこの印刷メニューを表示させないようにするにはどうすればよいのでしょうか。
- ベストアンサー
- その他（インターネット・Webサービス）
- ウェブサイト：グローバルナビのドロップダウンメニュー作成について
ezorisu-web CSSでドロップダウンメニュー http://ezorisu-web.com/web-design/archives/356 のサンプルを使用させていただき、ドロップダウン付グローバルナビゲーションをカスタマイズしていたところ、壁に当たってしまったので質問させてください。 上記サイトのサンプルどおりに作成したメニューはきちんと動きましたが、今回は添付データの画像のように、初期状態で見えている「一段目のメニュー」のみ画像を使用したいのです。 一段目のメニューにマウスオンで画像ロールオーバー＆上記リンク先サンプルのようにドロップダウンメニュー表示、という動作をさせたいと思っています。 一段目用の画像は、形が不定形で背景にも模様が入っているため、透過PNGを使用しております。 文字も画像化して統合してあります。 今回はIE6にも対応する必要があるため、 ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/ にて配布している「DD_belatedPNG.js」を導入しました。 また、CSSを使い、背景をスライドさせて実現させるタイプのロールオーバー処理を施してあります。 http://www.1uphp.com/con2/over/over3.html を参考に、画像は１枚絵にせずメニュー名別に分割してあります。 ここのリスト化とロールオーバーまではきちんと動きました。 ただ、これを組み合わせると挙動がおかしくなります。 一番上のリンク先のサンプルを基に一段目に背景画像を設定すると、二段目に背景画像が継承されてしまい、思うように表示されません。 添付画像のような動きを実現させるには、どのようなソースを書けば良いでしょうか。 分かりにくい点があるかと思いますが、必要事項あれば追記しますので、よろしくお願いいたします。
- ベストアンサー
- CSS
補足
お返事ありがとうございます。 早速見てみたのですが画像を変えれば使えそうですね！ 全てのメニューではなく一部がツリーメニューになるので できればhtmlで出力させたいと思っております。 <div> <ul class="normal"> <li><a href="">hoge0</a></li> <li><a href="">hoge1</a></li> <li><a href="">hoge2</a></li> </ul> <ul class="tree"> <li><a href="">ツリーメニュー</a></li> </ul> <ul class="treemenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブメニュー2</a></li> <li><a href="">サブメニュー3</a></li> </ul> <ul class="normal"> <li><a href="">hoge0</a></li> <li><a href="">hoge1</a></li> <li><a href="">hoge2</a></li> </ul> </div> htmlのclass指定で例えばnormalは普通のメニューで treeの箇所に＋と－の画像を表示させtreemenuのクラスが 開いたり閉じたりという形式になれば管理も楽かとは思うのですが このようなことはできるものでしょうか？