- ベストアンサー
フレームのこれってどうやるの？
はじめまして。 フレームのコンテンツ表示を下のURLのように +や-を押して、パカッて開いたり閉じたりできないでしょうか？ http://www.jp.uo.com/ 可能ならどこかサンプルなどサイトをご存知ではないでしょうか？ ぜひ教えて下さい。お願いします。
- yanbou
- お礼率100% (15/15)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちはyanbouさん、xruzです。 こんな感じでしょうか？（動作確認：Ie5.5sp2のみ） <html> <head> <title>プルダウンメニュー</title> <script language="javascript"> <!-- var isMenu = "hidden"; function onmenu(mnu,submenu,x,y) { document.all(submenu).style.visibility=isMenu=(isMenu=='hidden')?'visible':'hidden'; mnu.innerText=(isMenu=='hidden')?'+':'-'; document.all('div2').style.top=(document.all('menu1').innerText=='-')?116+18*3:116; } // --> </script> </head> <body bgcolor="azure" style="font-size:16px"> <div id='div1' style="position:absolute; left:10; top:100; width:200;"> <a id="menu1" href="#" onClick="onmenu(this,'menu11');return false">+</a>LINK1 <div id="menu11" style="position:absolute; left:-2; top:16; visibility:hidden;"> <tt> ├<a href="http://www.goo.ne.jp/" target='mainframes'>Goo Japan</a><br> ├<a href="http://www.msn.co.jp/" target='mainframes'>MSN Japan</a><br> └<a href="http://www.ibm.co.jp/" target='mainframes'>IBM Japan</a><br> </tt> </div> </div> <div id='div2' style="position:absolute; left:10; top:116; width:200;"> <a id="menu2" href="#" onClick="onmenu(this,'menu21');return false">+</a>LINK2 <div id="menu21" style="position:absolute; left:-2; top:16; visibility:hidden;"> <tt> ├<a href="http://www.goo.ne.jp/" target='mainframes'>Goo Japan</a><br> ├<a href="http://www.msn.co.jp/" target='mainframes'>MSN Japan</a><br> └<a href="http://www.ibm.co.jp/" target='mainframes'>IBM Japan</a><br> </tt> </div> </div> </body> </html> がんばってくださいね。
その他の回答 (1)
- kaji_0131
- ベストアンサー率37% (3/8)
始めまして、単刀直入に言うと出来ます。 但し、URLのページの＋や－は「Jpg」つまり絵なので、その絵を用意しなければ無理です。 文字のみでのと言うことでしたら、簡単に出来ます。 サンプルを乗せておきますので宜しければどうぞ。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME="GENERATOR" CONTENT="Oracle JDeveloper"> <TITLE>タイトル</TITLE> </HEAD> <script language="JavaScript"> <!-- function Menu (one, two) { if (one.style.display == 'none') { one.style.display=''; } else { one.style.display='none'; } } --> </script> <BODY> <DIV onClick="Menu(tree1, MENU1)"> <SPAN ID="MENU1" CLASS="title"> <a title="onMouseされた時の表示する文字" target="ContentsFrame">見せておく文字</a> </SPAN> </DIV> <DIV ID="tree1" STYLE="display:none;"> <UL> <LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト１</A><BR> <LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト２</A><BR> <LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト３</A><BR> </UL> </DIV> </BODY> </HTML> 補足しますと、ツリー表示させたい下の部分をDIVタグでくくり STYLE="display:none;"でディスプレイから見えないように隠しています。 DIVタグで文字をくくりonclikでjavaScriptに飛びツリー表示の下部部分を表示させるようにしています。 メニューを増加させる場合は <SPAN ID="MENU1" CLASS="title"> のID="MENU1"をID="MENU2"と言うようにし <DIV ID="tree1" STYLE="display:none;">の ID="tree1"をID="tree2"等とし増やせばOKです。 宜しければ参考にして下さい。
お礼
kaji_0131ありがとうございました。 増やし方も乗せてくださっていましたから わかりやすかったので助かりました。 参考に作成をしてみます！！
お礼
xruzさん、ありがとうございました。 こんなのがほしかったです。 サンプルまで頂いてすいませんでした。 頑張ります！！(^-^)