- 締切済み
ツリー式メニュー
自分のＨＰ内にツリー式メニュ―（三段）を設置したいんですが、 クリックしていくごとに↓のように表示されるものを 作りたいんです。 ■メニュー ┣■Ａ ┃ ┣■リンク１ ┃ ┣■リンク２ ┣■Ｂ ┃ ┣■リンク３ ┃ ┣■リンク４ ┃ ちなみに■部分は画像を使っています。 二段目までのツリー表示は出来るんですが…。 どなたか分かる方、お願いします。
- gorugo14
- お礼率70% (17/24)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ittochan
- ベストアンサー率64% (2667/4137)
<HTML> <HEAD> <TITLE></TITLE> <style> .hide { display:none } .view { display: } </style> <SCRIPT LANGUAGE=javascript> <!-- function menu_onclick(ev) { var el = event.srcElement.parentElement.children; for(i=0;i<el.length;i++){ if(el[i].tagName=="UL"){ if(el[i].className=="hide") el[i].className="view"; else { hide(el); } } } } function hide(el){ var i; for(i=0;i<el.length;i++){ if(el[i].children.length>1){ var chld = el[i].children; hide(chld) } if(el[i].tagName=="UL") el[i].className="hide"; } } function window_onload() { var menu = document.getElementsByName("menu"); for(i=0;i<menu.length;i++) menu[i].onclick = menu_onclick; } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <p>こういうの作ってみました。<BR>InternetExplorer限定です。</p> <ul><li> <IMG id=top src="samp1.jpg" name=menu>menu-A <ul class=hide><li> <IMG src="samp1.jpg" name=menu>menu-A-A <ul class=hide><li> <IMG src="samp1.jpg"><A href="samp1.htm">link-1</A> </li></ul> <li> <IMG src="samp2.jpg" name=menu>menu-B <ul class=hide><li> <IMG src="samp2.JPG"><A href="samp1.htm">link-2</A> </li></ul> </li></ul> </li></ul> </BODY> </HTML>
関連するQ&A
- ツリー型、階層型メニューが重なってしまう
自分でHPを開設していて困った事があるのですが、 ツリーメニューを複数使用する場合に、重なってしまい困っています。 メニュー１ ├説明 ├掲示板 ├○○ ├○○ └戻る メニュー２ ├メイン ├リンク └戻る ↑のように表示させたいのですが、メニュー１を開いた時にメニュー２に重なってしまい困っています。 他のサイトさんを調べてみると、メニュー１をクリックした時、メニュー２がちゃんと下にずれているのですが…。 どなたか解決策をご存知でしたら是非教えていただきたいです。 ヒントでも構いません＞＜
- 締切済み
- その他（インターネット・Webサービス）
- ツリーメニューが・・・
こんにちは、初めまして。 いまHPのギャラリーページで、 ツリーメニューを使って作っているんですが、 ２個め？のメニューが何故かリンクになってしまうんです。 説明が下手で解りづらくてすみませんが、 わかる方いらっしゃったら教えて下さい＞＜ お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 開閉式ツリー型メニューについて
こちらのサイトの↓ http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=tips_node 開閉式ツリー型メニュー（ロールオーバーあり）を参考にメニューを作ったのですが、 リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。 クリックをしてメニューが開いた状態を保ちながら 次のページにも反映される様にするにはどうしたら良いでしょうか？ ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした； 誰かお願いいたします。
- ベストアンサー
- JavaScript
- ツリー型メニューに詳しい人、教えてください。
私のＨＰは３分割に分かれたフレームのサイトです。 （left header main でわかれています） そこで教えてほしいのですが、私は自分のサイトに ツリー型のメニューを置きたいんです。 そこで、この間質問してこの形のメニュー↓ （図１） 掲示板 ←ここをクリックすると ｜＿初心者 ←これが出てくる ｜＿中級者 ← チャット ｜＿初心者 ｜＿中級者 の作り方を教えてもらいました。そこでまた質問なんですが 今度はツリー型に単独のものを入れたいんです。 どーいうものかというと、 （図２） 掲示板 ｜＿(1) ｜＿(2) チャット ｜＿(1) ｜＿(2) 日記 ←これをプラス。ツリー型にはしないでこれをクリックすると そのままリンク先にジャンプするようにしたい。 この形にしたいんです。どのようなタグ（ＪＡＶ？）が必要なんでしょうか？ 図(1)までのＪＡＶは教えてもらったので、追加するＪＡＶを 教えてください。 それから、その単独のリンクを３分割のフレーム中、mainに表示 させたいのですが・・・そのためのＪＡＶも教えてください。 意味不明な内容だとは思いますがどうぞよろしくお願いします。
- 締切済み
- Java
- リンク先でツリーを展開したままに
リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか？ たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。
- ベストアンサー
- JavaScript
- 画像を使用したツリーメニュー
jsを使用しツリーメニューを作ろうと思っているのですが 希望のものとしてはツリーが閉じている場合は＋の画像を表示し クリックしツリーが開いている場合は－の画像が表示されるものに したいと思っております。 知識がないもので検索してみたのですが画像の切り替わるツリー メニューのサンプルがなかなか見つからず困惑しております。 そのようなサンプルや解説サイトなどご存知の方がおりましたら 是非教えてください。 できればieだけじゃなく主要ブラウザで動作するものが希望です。 宜しくお願い致します。
- 締切済み
- JavaScript
- ツリー型メニューについて
社内のシステムのマニュアルをhtmlで作ることになりました。 左右２つのフレームにわけて左200ピクセルをメニューにしました。 メニューがこまかく、多くなりそうなので、ツリー型（クリックしなくても、 マウスを乗せるだけで展開するもの）にしようと思ったのですが、 展開した２段目のメニューが、フレームで切られて見えません（T_T) ●●●●にマウスを乗せると・・・ ●●●●┳page1 ▽▽▽▽┣page2 ■■■■┣page3 ┗page4 ↑この辺に、ボーダーがきてしまいます。 あまりメニュー幅を広くしたくないので、 ●●●● ▽┣page1 ■┣page2 ┣page3 ┗page4 こんな風に、すぐ下に展開させたいのですが、どうしたらいいでしょうか？ よろしくご指導お願いします。
- ベストアンサー
- JavaScript
- ツリーメニューの作成
ツリーメニューの表示ができません。 記述は以下のとおりです （ヘッダー内） メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ） <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 （実際にツリーメニューを表示させる箇所） <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー１<br> ツリー２<br> ツリー３<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のＨＴＭＬファイルで、ツリーメニューをつくったときには 正常に表示（クリックすると、ずらずらと出てくる）のに、今回同じソース（というのですか？）で記述してみたら、ダメでした。 「このページは表示できません」とかなります。
- 締切済み
- その他（インターネット・Webサービス）
- ツリーメニューについて
私はクリックすると下に文字が出るツリーメニューを使ったのですが クリックすると下に文字が出、かつフレームで二分割した右側に他のページを表示させる方法が知りたいです。 拙い説明で申し訳ありません。 HTMLタグは大体は理解していると思います。javascriptはまだよく分かっていません。 ツリーメニューも付け焼刃で使っています。 なので、参考にできそうなサイト様をお教えいただくか もしくは細かく説明していただけるとありがたいです。 サイトのURL：http://artclub.ojaru.jp/frame.html よろしくお願いします。
- ベストアンサー
- JavaScript
- DHTML ツリーメニュー ＊ 教えてください！
こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。 作ろうとしているメニューは メルシー３ ├メルシー３の特徴 ├メルシー３の仕組 ├メルシー３の償還例 └お申込メモ/運用レポート メルシー４ ├メルシー４の特徴 ├メルシー４の仕組 ├メルシー４の償還例 └お申込メモ/運用レポート 。。というかんじで、メルシー３、４をクリックすると、 詳細メニュがツリーメニューで見れるというものです。 ＊問題は＊＊＊ ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。 例えば、すべての項目が閉じている状態からはじめます。 メルシー３をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー４をクリックすると、今の状態ではメルシー３が開いたまま、メルシー４が開いてしまいます。 これをデフォルトで１つの項目しか開かないようにしたいのです。 スクリプトの現状は以下のようになっています。 <script type="text/javascript"><!-- if (document.getElementById) document.write('<style type="text/css"> .tree { display: none; }<'+'/style>'); function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; parent.contents.open(id+".html","contents") } と定義して <tr> <td id="sub"> <a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー３</a><br></td> </tr> <td> <div id="contents/mercy3" class="tree"> ├<a href="#" target="contents">メルシー３の特徴 </a><br> ├<a href="未設定" target="contents">メルシー３の仕組 </a><br> ├<a href="未設定" target="contents">メルシー３の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> <tr> <td id="sub"> <a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー４</a><br></td> </tr> <tr> <td> <div id="contents/mercy4" class="tree"> ├<a href="#" target="contents">メルシー４の特徴 </a><br> ├<a href="未設定" target="contents">メルシー４の仕組 </a><br> ├<a href="未設定" target="contents">メルシー４の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> とボディーで記述しています。 どなたか、ご存知でしたら、よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
お返事が遅れてしまって、ごめんなさい。 ＨＰ作成は、ホームページビルダーを使っているんですが、 ツリーが上手く表示されませんでした……。 ittochanさんのソースを参考に、自分でも勉強してみます。 ありがとうございました。