はじめまして。
フレームのコンテンツ表示を下のURLのように
+や-を押して、パカッて開いたり閉じたりできないでしょうか?
http://www.jp.uo.com/
可能ならどこかサンプルなどサイトをご存知ではないでしょうか?
ぜひ教えて下さい。お願いします。
No.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>
がんばってくださいね。
xruzさん、ありがとうございました。
こんなのがほしかったです。
サンプルまで頂いてすいませんでした。
頑張ります!!(^-^)
No.1
- 回答日時:
始めまして、単刀直入に言うと出来ます。
但し、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名">リスト1</A><BR>
<LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト2</A><BR>
<LI><A HREF="表示させるhtmlのURL" target="Frame名">リスト3</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ありがとうございました。
増やし方も乗せてくださっていましたから
わかりやすかったので助かりました。
参考に作成をしてみます!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- C言語・C++・C# 【C++】IDirect3DSurfaceのディープコピーは可能ですか? 1 2022/07/06 02:47
- その他(IT・Webサービス) MacとWindows Google検索した時のURL表示の違いについて 1 2022/11/17 10:38
- その他(IT・Webサービス) 301リダイレクトの使い方について 7 2022/04/05 17:50
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- 家具・インテリア ダブルのベッドにクイーンのマットレス 5 2023/02/11 08:35
- iOS iPhone用動画保存アプリiCapのデータは外付けUSBメモリに保存できますか? 1 2022/10/18 17:48
- 美術・アート 額縁・フレームを探しています 1 2023/01/21 15:17
- 中古パソコン LAVIE Direct NS(S)[Note Standard] GN254F/S9 2 2023/03/28 20:46
- Windows 10 ファイルエクスプローラーでフォルダを閉じる操作について 2 2022/10/15 11:06
- その他(動画サービス) PS5やPS4proに関して質問です。 Amazon primeとかビデオオンデマンドで映画見る時に 1 2023/06/12 16:46
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
指定したパスが現URLに含まれて...
-
innerHTMLの初期値
-
Jquery 親要素で順番入れ替え
-
JSで動的にリンクを作成
-
変数内容をHTML内で表示する方法
-
createElementで作成した要素を...
-
jqueryを使って無駄なspanタグ...
-
removeEventListenerについて
-
innerHTMLに入れたリンクが反応...
-
Notice:Undefined index が。
-
checkboxにチェックを入れると...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
文字列より<・・・>を削除す...
-
removeAttribute()メソッドで削...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
HTMLタグに複数のクラスを設定...
-
変数名をどのようにつけるのが...
-
401エラードキュメントを401.ht...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
HTMLとJavaScriptで作ったタイ...
-
getElementByIdの戻り値がnull...
-
指定したパスが現URLに含まれて...
-
[急ぎ] videoタグで埋め込んだm...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
jQueryで同じid属性が複数あっ...
おすすめ情報