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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

狭い空間に様々なページへのリンクを凝縮できる「プルダウンメニュー」を作ってみましょう。 プルダウンメニューそのものは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はどこに? >>

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます