HTML プルダウンメニューをリンクメニューにする方法

HTML でプルダウンメニュー（ドロップダウンリスト）をリンクメニューにする方法を紹介します。
例えば、スマートフォンサイトなどミニマムスペースのリンクメニューを実装したいときに便利な方法です。

HTML プルダウンメニューをリンクメニューにする方法

HTML プルダウンメニューの項目をURLリンクにするには、location.href に URL 情報を渡してページを遷移させます。

<select name="select" onChange="location.href=value;">

  <option value="#">ページを選択してください</option>

  <option value="aaaaa.html">AAAAA</option>

  <option value="bbbbb.html">BBBBB</option>

  <option value="ccccc.html">CCCCC</option>

  <option value="ddddd.html">DDDDD</option>

  <option value="eeeee.html">EEEEE</option>

</select>

まず、JavaScript の onChange イベント使って選択項目の値を取得します。
この場合 value の値 aaaaa.html を取得して、location.href に値を渡すことでページ遷移させます。

プルダウンメニュー特有の見出し追加するときは value="#" を指定します。

まとめ

HTML でプルダウンメニューをリンクメニューにする方法を紹介しました。