JavaScript初心者のためのプルダウンメニュー作成法
- JavaScript初心者の方にとって、プルダウンメニューの作成は難しいですよね。しかし、参考URLを用いてJavaScriptを使ってプルダウンメニューを作成する方法をご紹介します。
- ブリヂストン美術館のウェブサイトは、ネットスケープでも正しく表示されるJavaScriptを使用しています。しかし、その他のウェブサイトで公開されているJavaScriptサンプルはネットスケープでは正しく表示されません。Flashは使用できないため、JavaScriptで正しく表示されるサンプルを教えてください。
- JavaScript初心者の方にとって、プルダウンメニューの作成は課題です。しかし、ブリヂストン美術館のウェブサイトはネットスケープでも正しく表示されるJavaScriptを使用しています。他のウェブサイトで公開されているJavaScriptサンプルはネットスケープでは正しく表示されないため、Flashを使用しないJavaScriptのサンプルを探しています。
- ベストアンサー
プルダウンメニューの作り方（リンク要）
JavaScriptは全くの初心者です。 以前、ここの質問にもあったのですが、 http://oshiete1.goo.ne.jp/kotaeru.php3?q=157985 この方と同じものを作りたいのですが、この方が参考URLに指定しているものも、ブリヂストン美術館 http://www.bridgestone-museum.gr.jp/ も、ネットスケープでもきちんと表示されているのに、その他HP上で公開されているJavaScriptサンプルはどうしてもネットスケープで表示されないのです。Flashは使えないので、JavaScriptできちんと表示できるサンプルをご存じの方、教えて下さい。 よろしくお願いします。
- kotamagokotama
- お礼率85% (300/350)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>動かない時はそのまま下に表示するにはどうしたらよろしいでしょうか？ １つは、 デフォルトの表示を＋（閉じた状態）でなく－（開いた状態に）することですね。 こちらの方法であれば、スクリプトをオフにしている人でも表示できますしね。 ＣＳＳの display:none; を display:block; に変えてボタンのvalue="－" にするぐらいでいいと思います。 もう一つは、 if(!document.getElementById){ location.href="noscript.html"; } とか適用できるバージョンを調べて、 location.hrefでスクリプトを使わないページに飛ばすとかですかね。
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>これは、<script></script>で囲めばよろしいんですよね。（一応これで動いたのですが） そうですね。 別に書いてもいいですが、 ＃１のスクリプトと一緒にfunctionの前に書いてもいいです。 >とくに、バージョン指定とかはしなくても大丈夫なのでしょうか？ そうですね。 ＃１スクリプトはＤＯＭ(Document Object Model)をスクリプトから扱えることが前提となっております。 document.getElementById が定義されている（使用できる）ということは、ＤＯＭ対応していると考えていいと思われるので、これでいいと思います。 もしそれで問題（ブラウザ間やバージョンの差異とか）があれば、ブラウザやブラウザのバージョンをチェックすることになると思いますが。
お礼
何度もすみません。 これで先に進めそうです。 本当にありがとうございました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
サンプルを作ってみましたが、こんな感じでどうでしょう？ ネットスケープが現在使えないので、未確認ですが、ＩＥ６＆Firefox1.5で動作を確認しています。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <style> <!-- div.inside { padding-left:1em; display:none; } --> </style> <script type="text/javascript"> <!-- function changeFold(f){ if(f.value == "＋"){ f.value="－"; f.parentNode.childNodes.item(2).style.display="block"; } else { f.value="＋"; f.parentNode.childNodes.item(2).style.display="none"; } } //--> </script> </head> <body> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー１<div class="inside"> もろもろ<br /> <a href="index.html">トップ</a><br /> <a href="sub.html">サブ</a><br /> </div> </div> <div><input type="button" value="＋" onClick="changeFold(this)">メニュー２<div class="inside"> また別のもろもろ<br /> <a href="index2.html">トップ２</a><br /> <a href="sub2.html">サブ２</a><br /> </div> </div> </body> </html> ---------------------------------------------------------------- 使用のルール <塊:div><ボタン>ボタンの横の文章<非表示:div> 非表示になっている中身のＨＴＭＬ </非表示:div> </塊:div> のようなパターンになっていること <塊:div><ボタン>ボタンの横の文章<非表示:div> の部分は、改行しないこと。(ＩＥとFirefoxで解釈が異なるので)
補足
わざわざ書いて下さってありがとうございます。（なんとお礼を申し上げていいやら…） 当方の作業環境 MacOS 9.2.1 Internet Explorer 5.0(5.1は今未確認です） Netscape 7.0 MacOS 9.2.2 Internet Explorer 5.0 で作業確認ができましたが、 MacOS9.2.2のNetscape 4.7で確認ができませんでした。（リンク先が出てこないのです。） そこで、ご迷惑ついでに、動かない時はそのまま下に表示するにはどうしたらよろしいでしょうか？ どこかでその仕方を見かけたのですが、今探してもどうしても見つからなくて…。＞＜
関連するQ&A
- JavaScript；プルダウンでリンク先へ飛ぶやつについて
JavaScriptでプルダウンでリンク先を選択するやつがありますよね。このOkWebでもトップページの「最新のOshiete,Kotaeru]で使われているやつです。 あれで別フレームにリンク先を表示することは出来るのでしょうか？ JavaScriptの知識はほとんどありません。HomePageで公開されているものをコピーして使っているだけですので、そんな方法があるのであればわかりやすくご説明いただけると助かります。
- ベストアンサー
- JavaScript
- javascriptでなめらかなプルダウンメニューを
javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。
- 締切済み
- JavaScript
- Javascriptを使用したプルダウンメニュー
DHTMLのプルダウンメニューについて質問です。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1062604 上記URLの回答No2のソースを元にメニューを作っています。 このソースはonClickでプルダウンメニューが表示できるようになっているのですが、プルダウンで表示されたメニューを消すにはもう一度ボタンを押さなければいけません。 これを、プルダウンメニューからマウスアウトした時に消えるようにするにはどのように記述すればいいのか未熟者でわかりません。 困っているので、ご回答いただければと思います。 よろしくお願いします。
- 締切済み
- JavaScript
- プルダウンメニューからチェックボックスを表示したい
php、javascript、mysqlを使用し、プルダウンで選択後、チェックボックスを表示させる仕組みを作りたいのですが、 どうすればよいのか分かりません。 どなたか力を貸して頂きたく思います。 例えば下記のようなTBLがあったとします。 ■TBL：oya oyaコード 10 20 30 ■TBL：ko oyaコード koコード 10 1100 10 1200 10 1300 20 2100 20 2200 30 3100 TBL 「oya」 をプルダウンメニューにセット。 プルダウンメニューを選択する度にTBL 「ko」を呼び出し、同ページ内にチェックボックスとして表示させたいと考えています。 例） ・10が選択されたら 「1100」、「1200」、「1300」のチェックボックスを表示する プルダウンメニューへのセットは出来たのですが、プルダウン選択後の「ko」を呼び出す箇所が分かりません。 php Mysql javascript で実現したいと考えております。 サンプルページでもいいですので、何かありましたら教えて下さい。 お分かりになる方よろしくお願いいたします。
- 締切済み
- JavaScript
- 【急ぎます！】メニューの色を変更する・アイコンを作成するには
先ほどお答えいただいた方々ありがとうございます。 http://www.rikunabi2007.com/07/LIVE/ ここの「詳しくはこちら」というところにカーソルをあてると、白っぽくなります。 (1)これはhttp://flash.xtaro.com/sozai/tool/fcount/sample.htmここのメニュー１や２で応用したければどんなタグを組めばいいのですか？ (2)http://oshiete1.goo.ne.jp/kotaeru.php3?q=1918231の質問のタグの中のどの部分に入れたらいいのですか？ (3)このようなアイコン？？を作るにはどうすればいいのですか？お勧めのソフトがあれば教えてください。ワードでも出来るもんなんですか？
- 締切済み
- HTML
- FLASHを使用した検索cgi
http://oshiete1.goo.ne.jp/kotaeru.php3?q=608132 でも質問したのですが、まだわからないので教えてください。 FLASHからキーワード入力→cgiで検索、 ということがしたいのですが、FLASHで入力したキーワードを直接cgiに渡して検索結果を表示ということができません。 FLASHは5です。 よろしくお願いします。
- 締切済み
- CGI
- 飛び出すメニューについて
http://www.ex-yz.com/labo/flash/2007/05/2.html これのような、マウスオーバーで下位項目が出てくるというメニューをFlashで作りたいと考えています。 このサンプルでは飛び出す最大の範囲までFlashの領域として確保されていますが、 通常ヘッダーなどに置いた場合、そんなに下が開いている事はあり得ないと思うので 最初から表示されている部分（メインメニュー）のみを初期のFlashの領域とし、 飛び出たサブメニュー部分は下のhtmlに被らせるような状態で作りたいと思うのですが、 これはどうすれば実現できるのでしょうか？ Flashとhtmlだけではできないのでしょうか。 あと、Flashで作られたこういうロールオーバーでサブが出てくるようなメニューで 何かかっこいいサイトや効果的な使い方をされているような 参考になるサイトがあれば教えてください。 Javascriptでも作れるような、ただ降りてくるだけのものではなく Flashならではというものを色々見てみたいので。 よろしくお願いします。
- ベストアンサー
- Flash
- RedHat 9.0 でCGIが動いたのですが・・・
再度、不満というよりも、不便なことが起きました・・・(爆 CGIは、「dos2unix」のコマンドを使うことによって解決したのですが、友人にスペースをあげているためにわざわざコマンドをするのは・・・ ということで、dos2unixをやらなくてもいい方法（スクリプト等？？）はないでしょうか？ よろしくお願いします・・・。 参考になる・・・かな？ 過去の質問 Red Hat Linux 9.0 でWebを公開したのですが・・・ http://oshiete1.goo.ne.jp/kotaeru.php3?q=614762 Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.2 http://oshiete1.goo.ne.jp/kotaeru.php3?q=617184 Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.3 http://oshiete1.goo.ne.jp/kotaeru.php3?q=618685 Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.4 http://oshiete1.goo.ne.jp/kotaeru.php3?q=630574
- ベストアンサー
- その他(OS)
- Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.3
たびたび問題が起きました(;^_^A アセアセ… CGIが動かないのに加え、httpも動きません・・・ （Access forbidden!との表示） トップは動くのですが、その中にあるユーザディレクトリが見れません。 どなたかお力をお貸し下さい。 前質問 Pert.1 Red Hat Linux 9.0 でWebを公開したのですが・・・ http://oshiete1.goo.ne.jp/kotaeru.php3?q=614762 Pert.2-1（ミス Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.2 http://oshiete1.goo.ne.jp/kotaeru.php3?q=617045 Pert.2-2 Red Hat Linux 9.0 でWebを公開したのですが・・・Pert.2 http://oshiete1.goo.ne.jp/kotaeru.php3?q=617184 参考にしたHP http://www.apache.jp/docs/howto/cgi.html#scriptalias http://acorn.zive.net/~oyaji/www/apache_linux.htm http://oshiete1.goo.ne.jp/kotaeru.php3?q=602630 ↑ちなみに試してみましたが、500エラーの内容が変わっただけでした。 perlのアップデートをしても、変わりません・・・。
- ベストアンサー
- その他(OS)
お礼
早速の回答ありがとうございます。 >デフォルトの表示を＋（閉じた状態）でなく－（開いた状態に）することですね。 どうも上手くいかなかったので、__; >if(!document.getElementById){ location.href="noscript.html"; } こちらで作成させていただくことにしました。 これは、<script></script>で囲めばよろしいんですよね。（一応これで動いたのですが） とくに、バージョン指定とかはしなくても大丈夫なのでしょうか？ JavaScriptもきちんと勉強しなければならないとつくづく思い知らされました。 この度は本当にご親切にありがとうございました。