多階層のカテゴリを取得し、1階層ずつ一覧を表示するサイドバーを実装したい

Question

お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。

前提

• 現在構築しているサイト上には、

ビジネス向けのデータ(ファイルやテキスト文など)が多数あり、
それぞれがカテゴリ分けされています。

• カテゴリは5階層に分かれています。
• カテゴリはデータベースに入っており、変更の想定があります。

(保守の際にカテゴリが変更できない仕様だとまずいです)

やりたいこと

• サイトのトップページ左側(サイドバー部分)にて、

下記ヤフオクのサイトの左側「カテゴリから探す」の
下の「コンピュータ」や「家電、AV、カメラ」に
マウスオーバーした時のように、
カテゴリを右にどんどん出していく仕様にしたいです。
https://auctions.yahoo.co.jp/

• ヤフオクでは2階層しかカテゴリがないですが、

2階層目のカテゴリが出たあと、2階層目のカテゴリを
マウスオーバーするとさらにそれに応じた3階層目のカテゴリが
出現するように繰り返し、5階層目まで実装したいです。
(ヤフオクで例えると、「コンピュータ」をマウスオーバー(2階層目が出現)
→「パソコン」をマウスオーバー(3階層目が出現)→・・・といった形です)

質問

上記やりたいことを実装する上で、
役に立ちそうなjqueryやドロップダウンがありましたら、
ご教示いただけないでしょうか。
※尚、カテゴリを選択して、次の階層のカテゴリ一覧を右側に
表示する際、マウスオーバーでページ遷移しない非同期の仕様が
希望ですが、その目的はユーザビリティを上げるため、です。
もしユーザビリティを担保できるのであれば、
是非他の方法に関してヒントも頂けますと非常に助かります

考えたこと

上記やりたいことを実現するには、以下2点が必要と考えています。
0. マウスオーバーを発火点としてマウス
オーバーしたカテゴリの次の階層一覧を
データベースから取得する機能(jqueryが必要？)
0. １に合わせて階層数を動的に設定するサイドバーの
右ドロップダウンメニュー
(jqueryが必要？)

試したこと・現状

下記ワードで検索しましたが、なかなか思う通りのものが見つかりません。
<検索したワード>
jquery　プラグイン(plugin)　メガメニュー(mega menu)　right dropdown
サイドバー(sidebar) 階層(hierarchy) ツリー(tree)

カテゴリを選ぶたびにページを遷移させる仕様であればjqueryは
いらないかと存じますが、できればページを遷移させたくないので、
jqueryの知識がない状態からゼロベースで実装するのはかなり難しそうです。

一旦、静的に右ドロップダウンメニューを表示させる
機能までは実装してみました。

view

<div class="sidebar border">
 <nav class="sidebar-menu" role="navigation">
  <ul>
   <li class="bg-deepblue">資料を検索</li>
     <div class="d-block my-1">
       <div class="dropright_top">
       <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
       <ul class="dropdown-menu multi-level">
         <li><a href="#">Default</a></li>
         <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li><a href="#">sub menu1</a></li>
           <li class="dropdown-submenu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
           <ul class="dropdown-menu">
             <li class="dropdown-submenu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
             <ul class="dropdown-menu">
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
             </ul>
             </li>
           </ul>
           </li>
         </ul>
         </li>
        </ul>
        </div>
      </div>
  </ul>
</nav>
</div>

css

.sidebar-menu ul {
  text-align: left;
  margin: 0;
  padding: 0;
}

.sidebar-menu ul li {
  color:white;
  list-style: none;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 600;
  position: relative;
  padding: 7px 7px;
  white-space: nowrap;
}


.dropright_top .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright_top .dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright_top .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright_top .dropdown-toggle::after {
  vertical-align: 0;
}



.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

宜しくお願い致します。

Comments

[m.ts10806]

Laravelであればデフォルトで、タグに使われているBootStrapが入っているはずですよね？あまりしっかり自作する必要ないと思うのですが、BootStrapのマニュアルはどこまで確認されたのでしょうか。

[gobindar]

mts10806様
追記修正依頼有難うございます。
BootStrapのマニュアルは確認済で、
下記の「ドロップダウンのオプション（Dropdown options）」
が当質問の該当部分かと存じますが、一つ前の階層を参照して次の階層を
表示するなどのサンプルはなく、JS初心者には理解にかなり厳しいところが
あるというのが現状です…。
https://cccabinet.jpn.org/bootstrap4/components/dropdowns

Answer 1

こちらの質問の「現状」に記載の方法で実装致しました。
https://teratail.com/questions/197749