プルダウンメニューを作る
狭い空間に様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。 プルダウンメニューそのものはHTMLで簡単に作ることができます。 選択された項目に応じてページを移動するにはJavaScriptを使う必要があるのですが、 記述量はわずか1行(半角20文字!)で済みます。
今回ご紹介する方法で作ると、以下のようなプルダウンメニューができあがります。
上記のプルダウンメニューは、実際に機能します。(移動したら、ブラウザの「戻る」ボタンで戻ってきて下さい。)
※JavaScriptが使えないか無効な環境では機能しません。
記述するJavaScriptは、わずか20文字
早速、プルダウンメニューを実現するソースをご紹介致しましょう。
以下のようにHTMLを記述すると、4つの項目があるプルダウンメニューができあがります。
<select onChange="location.href=value;">
<option value="#">移動先を選択</option>
<option value="page1.html">ページ1</option>
<option value="page2.html">ページ2</option>
<option value="page3.html">ページ3</option>
</select>
</form>
たったこれだけです。
option要素の内容(=<option ...>~</option>の間)にメニュー項目として表示したい文字列を記述し、 value属性の値に移動先ファイル名(またはURL)を記述します。
上記のソースは、一見HTMLしか書いていないように見えるかも知れませんが、 ページ移動用のJavaScriptも含んでいます。 つまり、プルダウンメニューとして機能させるのに必要なHTMLとJavaScriptは、上記のソースで「すべて」です。
ページ移動用のJavaScriptがどこに記述されているか、分かりますか?