クリック後、ページ遷移せずに下層のカテゴリを選択できるようにしたいです。

Question

下記URL内の検索部分を再現したく考えております。
https://hitosara.com/aomori/

具体的には下記の画像の緑枠をクリックするとメガメニューが表示され、赤枠のカテゴリをクリックするとページ遷移なしで下層カテゴリに移動し、最終的に選択した部分が緑枠の部分に反映されるようにしたいと思っております。

・クリックしてメガメニューを表示
・ページ遷移なしで下層カテゴリへ移動し、選択後に緑枠へ反映

JS、jQueryで1から作成できればいいのですが、jQueryをカスタムするくらいの技術力しかございません。。。＞＜
上記の2つが実現できるjQueryや参考サイト、コードがございましたらご教示いただけないでしょうか。

何卒宜しくお願いいたします。

Answer 1

下記の技術などについて再度ご自分で調査を行うとよろしいかと。

• Ajax（ページ遷移をせずに、httpリクエストを行い、レスポンスを受け取る技術・仕様）
• jQuery データベース 取得 ...など（多分上記とほぼほぼ同じ調査結果となる）
• jQuery HTMLの変更 ...など
• jQuery プラグイン プルダウン ...など（いっぱいプラグイン出てきます）

コードは、丸投げ作業依頼に答える形になってしまうので、記載はしません。
（そして、なかなかのコード量になるので）

Answer 2

miyabi_takatsukさんの書いてる通り、Ajax + jQueryで実装が妥当ですね。
Ajaxは、サーバー通信で画面遷移をせずに結果だけを得る場合に用いる技術
jQueryはGUIで色々と操作可能になる技術です。
共にWEB画面では多用される技術なので覚えておいて損はないですよ。
今のWEB技術なら、HTML + JavaScript + CSS + Ajax + jQueryは必須かと。

Answer 3

ご回答ありがとうございます！
Ajax+jQueryの知識が乏しく、まだまだ自分の勉強不足を痛感しています・・・

ページ遷移なしのドリルダウンで多階層のメニューを実装できる「mlStackNav」というスクリプトをカスタマイズしてなんとか解決いたしました！

ここにいらっしゃる方のようにもっと自在に表示させる事ができるように頑張ります！