JavaScriptの location.href
を使って、リンク一覧のドロップダウンメニューを作ってみました。
location.href
locationで取得できる情報は複数ありますが、location.href
では、現在表示している Web ページ の URL を参照することができます。
locationで取得できる情報
locationで取得できる情報は以下の通りです。
- location.href …… 現在ページURLを参照する
- location.protocol …… 現在ページURLのプロトコルを参照する
- location.hostname …… 現在ページURLのホスト名を参照する
- location.host …… 現在ページURLのホスト情報を参照する
- location.port …… 現在ページURLのポート番号を参照する
- location.pathname …… 現在ページURLのパス名を参照する
- location.search …… 現在ページURLのサーチ情報を参照する
- location.hash …… 現在ページURLのハッシュ部分を参照する
- location.reload() …… ページをリロード(再読み込み)する
- location.replace() …… 指定したページへ移動する
上記のようにたくさんありますが、この記事ではURLを参照するlocation.href
を使ったスニペットで、ドロップダウンメニューを作っています。
location.hrefでドロップダウンメニューのサンプル
ドロップダウンメニューのサンプルです。
「ここでリンクを選ぶ」を選択すると、ドロップダウンでリンクが開きます。そして、リンクを選んだ後にその横にある「リンクへ」のボタンクリックで、ページ遷移する仕組みです。
ドロップダウンは、WebのUIでは最近あまり見かけなくなりました。
ドロップダウンメニューのコード
option
タグの中に遷移させたいリンクURLを記述して、ボタンをクリックすると設定したページに遷移します。
HTMLの記述方法は、このように非常にシンプルです。
<form action="#" name="hrefform">
<select name="hrefselect">
<option value="#">ここでリンクを選ぶ
<option value="https://dubdesign.net/">HOME
<option value="https://dubdesign.net/javascript/addeventlistener-drawer/">記事のリンク1
<option value="https://dubdesign.net/javascript/tolowercase-search/">記事のリンク2
</select>
<input type="button" value="リンクへ" onclick="url_jump();">
</form>
option
タグの valueに、移動先の URL とドロップダウンに表示される名前を記述しましょう。
また、JavaScriptのコードもシンプルで、url_jump()
の関数宣言のみでOKです。
function url_jump() {
location.href = document.hrefform.hrefselect.value;
}
document.フォーム名(ここではhrefform).エレメント名(ここではhrefselect).options[n].value とすると、取得したい option の value 値を取得することができます。