質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,542

score 47

お世話になっております。
当方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点が必要と考えています。

  1. マウスオーバーを発火点としてマウス
    オーバーしたカテゴリの次の階層一覧を
    データベースから取得する機能(jqueryが必要?)
  2. 1に合わせて階層数を動的に設定するサイドバーの
    右ドロップダウンメニュー
    (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;
}

宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/03/04 10:43

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

    キャンセル

  • gobindar

    2019/03/05 11:57

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る