LAST UPDATE   | Posted by Takumi Hirashima

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

HTML でプルダウンメニュー(ドロップダウンリスト)をリンクメニューにする方法を紹介します。
例えば、スマートフォンサイトなどでスペースを取らずにリンクメニューを実装したい時に便利な方法です。

<select name="select" onChange="location.href=value;">
	<option>ページを選択してください</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 に URL 情報を渡すことでページを遷移します。

まとめ

HTML でプルダウンメニュー(ドロップダウンリスト)をリンクメニューにする方法を紹介しました。

スポンサーリンク