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 値を取得することができます。
![JavaScriptのライブラリQRious.jsで任意の文字列をQRコードで出力 [canvasとpngファイルを出力]](https://dubdesign.net/wp-content/uploads/2022/08/qrcode-1.svg)
