- ベストアンサー
まわりの部品を押しのけないメニュー
HTML小技集(http://lll.s21.xrea.com/)に載っている 「ツリーメニュー」のように、特定のリンクをクリックしたとき 指定された文字列などを表示するメニューが作りたいのですが この「ツリーメニュー」の場合 開かれたメニュー以下の部品を押しのけて表示してしまいます。 この、ツリーメニューのようにクリックされたとき文字列などを表示するが 他の部品に影響を与えないツリーメニューを作るにはどうすればいいでしょうか?
- yue_1995
- お礼率29% (34/116)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 2通りありますがそれぞれデメリットもあります 【visibilityを使う】 <script type="text/javascript"><!-- function ok(id){ obj =document.getElementById(id); obj.style.visibility = obj.style.visibility=="hidden"?"visible":"hidden"; } //--></script> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <DIV ID="tree1" style="visibility:hidden"> ┣ 小技集<BR> ┣ 役立つ雑学<BR> ┣ ウザイページ<BR> ┣ JavaScriptを勉強<BR> ┗ 掲示板<BR> </DIV> <--デメリット--> 表示に目隠しをしてるだけなので余分な空白が必要になる 【positionを使う】 <script type="text/javascript"><!-- function ok(id){ obj =document.getElementById(id); obj.style.display = obj.style.display=="none"?"block":"none"; } //--></script> <B><A HREF="JavaScript:ok('tree1');">■メニュー</A></B><BR> <div style="position:relative;"> <DIV ID="tree1" style="display:none;position:absolute;top:0px;left:0px;"> ┣ 小技集<BR> ┣ 役立つ雑学<BR> ┣ ウザイページ<BR> ┣ JavaScriptを勉強<BR> ┗ 掲示板<BR> </DIV> </div> <--デメリット--> HTMLの上の階層として表示するので下の文字などと被さって表示される これらのデメリットを踏まえた上で改良されれば理想のものはできると思います 例えば下であればid="tree1"に背景色(background-color)をつける・・とか
関連するQ&A
- ツリーメニューについて
私はクリックすると下に文字が出るツリーメニューを使ったのですが クリックすると下に文字が出、かつフレームで二分割した右側に他のページを表示させる方法が知りたいです。 拙い説明で申し訳ありません。 HTMLタグは大体は理解していると思います。javascriptはまだよく分かっていません。 ツリーメニューも付け焼刃で使っています。 なので、参考にできそうなサイト様をお教えいただくか もしくは細かく説明していただけるとありがたいです。 サイトのURL:http://artclub.ojaru.jp/frame.html よろしくお願いします。
- ベストアンサー
- JavaScript
- ツリー式メニュー
自分のHP内にツリー式メニュ―(三段)を設置したいんですが、 クリックしていくごとに↓のように表示されるものを 作りたいんです。 ■メニュー ┣■A ┃ ┣■リンク1 ┃ ┣■リンク2 ┣■B ┃ ┣■リンク3 ┃ ┣■リンク4 ┃ ちなみに■部分は画像を使っています。 二段目までのツリー表示は出来るんですが…。 どなたか分かる方、お願いします。
- 締切済み
- 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;"> ツリー1<br> ツリー2<br> ツリー3<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のHTMLファイルで、ツリーメニューをつくったときには 正常に表示(クリックすると、ずらずらと出てくる)のに、今回同じソース(というのですか?)で記述してみたら、ダメでした。 「このページは表示できません」とかなります。
- 締切済み
- その他(インターネット・Webサービス)
- 階層化されたメニューの作り方
いつも助けていただきありがとうございます。 あまりに抽象的過ぎるのですが、こんな感じのメニューを作りたいのですが、どのような記述になるのでしょうか?? (1)まず、横5行、縦5列の表があるとします。 横をA~E、縦を1~5として、最初にA1の部分に「START」のような文字があり、マウスが乗っかっていないときには透明度20%ぐらいで存在します。 (2)ここにマウスを乗せると(on mouse)透明度が0%になり、1列目にB~Eまでメニューが現れます。 (3)この現れたメニューは透明度50%ぐらいで、マウスを乗せると(たとえばB1のメニューに乗せると)これも透明度が0%になり、B2~B5までコンテンツメニューが開き、これらも透明化されています。 (4)この透明化されたものにマウスを乗せると、それぞれマウスを乗せたものが乗せたときに透明度0%に戻り、クリックをすることでそれぞれのリンク先に飛ぶことができます。 ただの縦方向への展開・階層化されたメニューの作り方はなんとなくわかるのですが(某HPで使ってる方がいたのでサンプルを頂きました)、今回のように、一度横に展開し、それぞれがまた縦方向に展開、リンクが出現するというメニューの作り方がまったくわかりませんでした。 ちなみに、参考にしたサイトはこちらです。 http://www.calm-web.com/lecture/script/h_script/index.html ここでは、いわゆるツリー型っていうものだと思うのですが、私の望む形にするにはどのようにすればよいでしょうか?? どうぞ、ご教授のほどよろしくお願いします。
- ベストアンサー
- JavaScript
- リンク先でツリーを展開したままに
リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか? たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。
- ベストアンサー
- JavaScript
- ツリー型メニューで、小メニューを開いたまま次のページに行きたい。
ツリー型メニューをナビに使いたいです。 例えば、 ●はじめに ├サイトについて ├わたしについて └会社について ↑このようなメニューを作って、 「はじめに」をクリックすると、 下に「サイトについて」などの小メニューが出てきます。 その後、「サイトについて」をクリックしてページ移動したときに、 メニューが閉じてしまいます。 このツリーが開いたままで移動したいのですが、 どのようにすればよいでしょうか。 ちなみに、このツリーメニューは大量ページに渡って表示するため、 一括で更新できるように、 インラインフレームで読み込んでくるつもりです。 (ほかにわりかたがわからないので・・・) よろしくおねがいします!
- 締切済み
- JavaScript
- ツリー型、階層型メニューが重なってしまう
自分でHPを開設していて困った事があるのですが、 ツリーメニューを複数使用する場合に、重なってしまい困っています。 メニュー1 ├説明 ├掲示板 ├○○ ├○○ └戻る メニュー2 ├メイン ├リンク └戻る ↑のように表示させたいのですが、メニュー1を開いた時にメニュー2に重なってしまい困っています。 他のサイトさんを調べてみると、メニュー1をクリックした時、メニュー2がちゃんと下にずれているのですが…。 どなたか解決策をご存知でしたら是非教えていただきたいです。 ヒントでも構いません><
- 締切済み
- その他(インターネット・Webサービス)
- オプションメニューにアイテムをプログラムで追加したい
form2に置いたメニュー(name=URLs)に、表示したいURLを次々に追加して、その一つのアイテムをクリックしたらform1に表示される、っていう操作をJavaScriptで書きたいのですが、基本的な知識をどなたかお教え下さい。 必要な部品は、一行テキスト領域、メニューURLsにURLの文字列を送り込むためのプッシュボタン、オプションメニュー(URLs)でやりたいと思います。
- ベストアンサー
- JavaScript
- もしもドロップシッピング メニューをツリー表示に
みなさん今晩は、質問させてください。 今日もしもドロップシッピングに登録し開店したのですが、 商品メニューをツリー表示に出来ないのでしょうか? 例えば 「ホビー」-「楽器」-「ギター」のようにクリックしていくとサブメニューが開いて欲しいのです。 HTMLは一応分かります。 それではよろしくお願い致します。
- 締切済み
- ホームページ作成ソフト
- FLASHのメニュー導入に関して
現在ホームイページを運営していますが、HTMLでつくったものです。FLASH素材の「メニュー」を導入して動きを出したいのですが、いくつか疑問が生じました。 (1) リンク先のサイズ指定はどうやって指定するのか? (2) 同じくリンク先の表示場所指定はどうやってするのか? という2点についてです。 同じブラウザ内・新しくブラウザを立ち上げる等の説明はネットに転がっているんですが、もう一歩踏み込んだ所を知りたいのです。 ホームイページでは、メニュー画面からわりと小さなサイズが別で開くようにして、写真紹介等をしています。 同じようにFLASHを使ったメニュー画面を作りたいのです。 どのようにすれば良いのでしょうか? 教えてください。
- ベストアンサー
- その他(インターネット・Webサービス)
お礼
positionで十分です!!! プログラムのメニュー風に作りたかったので! これをうまく使えばVista Aero風(=半透明)なメニューが作れます! ありがとうございました!