- ベストアンサー
JavaScript初心者のためのプルダウンメニュー作成法
- JavaScript初心者の方にとって、プルダウンメニューの作成は難しいですよね。しかし、参考URLを用いてJavaScriptを使ってプルダウンメニューを作成する方法をご紹介します。
- ブリヂストン美術館のウェブサイトは、ネットスケープでも正しく表示されるJavaScriptを使用しています。しかし、その他のウェブサイトで公開されているJavaScriptサンプルはネットスケープでは正しく表示されません。Flashは使用できないため、JavaScriptで正しく表示されるサンプルを教えてください。
- JavaScript初心者の方にとって、プルダウンメニューの作成は課題です。しかし、ブリヂストン美術館のウェブサイトはネットスケープでも正しく表示されるJavaScriptを使用しています。他のウェブサイトで公開されている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で確認ができませんでした。（リンク先が出てこないのです。） そこで、ご迷惑ついでに、動かない時はそのまま下に表示するにはどうしたらよろしいでしょうか？ どこかでその仕方を見かけたのですが、今探してもどうしても見つからなくて…。＞＜
お礼
早速の回答ありがとうございます。 >デフォルトの表示を＋（閉じた状態）でなく－（開いた状態に）することですね。 どうも上手くいかなかったので、__; >if(!document.getElementById){ location.href="noscript.html"; } こちらで作成させていただくことにしました。 これは、<script></script>で囲めばよろしいんですよね。（一応これで動いたのですが） とくに、バージョン指定とかはしなくても大丈夫なのでしょうか？ JavaScriptもきちんと勉強しなければならないとつくづく思い知らされました。 この度は本当にご親切にありがとうございました。