ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

極短JavaScriptでプルダウンメニューを作る

狭いスペースに様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。簡単なJavaScriptを使いますが、スクリプトはHTML内にわずか20文字です!

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

<form>
   <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がどこに記述されているか、分かりますか?

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

更新日:2007年03月16日

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    1

    この記事を共有する