2023.11.24｜JavaScript（jQuery）

プルダウンメニューにリンクを設定して遷移先のページでリンクを維持するJavaScriptの設定方法

プルダウンメニューにリンクを設定して遷移先のページでリンクを維持するJavaScriptの設定方法

プルダウンメニューは、ウェブサイトやウェブアプリケーションのナビゲーションにおいて、階層構造のメニューアイテムをコンパクトに表示し、ユーザーが特定のページやセクションにアクセスするためのメニューです。
一般的には、親メニューアイテム（通常はテキストまたはアイコン）をクリックまたはホバーすると、関連するサブメニューアイテムが垂直または横に展開される形状をしています。
また、プルダウンメニューにリンクを設定して遷移先のページでリンクを維持するには、JavaScriptを活用することで設定できます。

今回は、プルダウンメニューにリンクを設定して遷移先のページでリンクを維持するJavaScriptの設定方法を解説します。

本記事の内容

プルダウンメニューにリンクを設定して遷移先のページでリンクを維持する設定方法

ウェブサイトの設計において、ユーザーがスムーズに目的のページにアクセスできるようにすることは不可欠です。その中でも、プルダウンメニューは洗練されたナビゲーションを提供し、階層構造のメニューアイテムを効果的に整理する手段として広く利用されています。

プルダウンメニューにリンクを設定し、ユーザーがメニュー項目を選択した際に遷移先のページでもそのリンクを維持する方法をご紹介いたします。

1.プルダウンメニューの作成

プルダウンメニューは通常、HTMLとCSSを使用して構築されます。
プルダウンメニューは「select」でメニューを囲んでhtmlに記述し、cssでデザインを設定します。

また、ページ遷移するためのリンクを「value」要素に設定します。
※「option」要素内の「value」属性に「disabled」を設定するとリンクが無効化されます。

htmlファイルに記述
<nav>
<select id="orderSelect" name="select" onChange="location.href=value;">
<option disabled>カテゴリーから探す</option>
<option value="/sample/029/index.php">ALL</option>
<option value="/sample/029/sample01.php">サブメニュー01</option>
<option value="/sample/029/sample02.php">サブメニュー02</option>
<option value="/sample/029/sample03.php">サブメニュー03</option>
<option value="/sample/029/sample04.php">サブメニュー04</option>
</select>
</nav>
cssファイルに記述
.box1 input[type="text"], .box1 input[type="tel"], .box1 input[type="email"], .box1 input[type="search"], .box1 input[type="password"], .box1 input[type="url"], .box1 input[type="number"], .box1 select, .box1 textarea {
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid #D9D9D9;
	padding: 10px;
	font-size: 14px;
}

2.遷移先のページでリンクを維持するJavaScriptを記述

プルダウンメニューを選択し、そのまま選択したメニューを維持したままページ遷移するためには、html内にJavaScriptコードを記述します。
※JavaScriptコードを上部に記述して動かない場合は、ページ下部に設定してください。

htmlファイルにJavaScriptを記述
<script async>
   const path = location.pathname;
   for (let opt of document.getElementById("orderSelect").options) {
        if (opt.value == path) {
           opt.selected = true;
           break;
        }
    }
</script>

実装サンプル

実装サンプルを作りましたのでこちらでも確認してみてください。
JavaScriptデモ

まとめ

以上で設定完了となりますが、簡単に設定ができますね。
プルダウンメニューは、ユーザーフレンドリーなナビゲーションを提供する際に便利であり、効果的なウェブサイトやアプリケーションの設計において重要な役割を果たします。カテゴリーなどのメニューをプルダウンにすることによりデザインをシンプル見せることができますね。

«
»

関連記事