【ホームページ作成】極短JavaScriptでプルダウンメニューを作る

プルダウンメニューを作る

狭い空間に様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。 プルダウンメニューそのものはHTMLで簡単に作ることができます。 選択された項目に応じてページを移動するにはJavaScriptを使う必要があるのですが、 記述量はわずか1行（半角20文字！）で済みます。

今回ご紹介する方法で作ると、以下のようなプルダウンメニューができあがります。

上記のプルダウンメニューは、実際に機能します。（移動したら、ブラウザの「戻る」ボタンで戻ってきて下さい。）
※JavaScriptが使えないか無効な環境では機能しません。

記述するJavaScriptは、わずか20文字

早速、プルダウンメニューを実現するソースをご紹介致しましょう。
以下のようにHTMLを記述すると、4つの項目があるプルダウンメニューができあがります。

たったこれだけです。
option要素の内容（＝<option ...>～</option>の間）にメニュー項目として表示したい文字列を記述し、 value属性の値に移動先ファイル名（またはURL）を記述します。

上記のソースは、一見HTMLしか書いていないように見えるかも知れませんが、 ページ移動用のJavaScriptも含んでいます。 つまり、プルダウンメニューとして機能させるのに必要なHTMLとJavaScriptは、上記のソースで「すべて」です。

ページ移動用のJavaScriptがどこに記述されているか、分かりますか？

プルダウンメニューの機能を作るJavaScriptはどこに？ >>