HTML

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 でプルダウンメニューをリンクメニューにする方法を紹介しました。

この記事をシェアする