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

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


<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 に URL 情報を渡すことでページを遷移します。
見出しとして使いたい項目は value="#" を指定します。

まとめ

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

スポンサーリンク

合わせて読みたい関連記事