多段階構造ナビゲーションバーと言っても何かピンとこないと思いますので
イメージとして
https://gyazo.com/20b1868225334bffa7cccc7d27d109a0
↑のような感じのナビバーのことをここでは多段階構造ナビゲーションバーと読んでます(正式名称があったらごめんなさい)
この多段階構造ナビゲーションバーは某プログラミングスクールのカリキュラムで
メルカリを真似したサイト制作時に実装した機能の一つです
多階層構造データテーブルはgem ancestryを使って用意しました(ancestryが必ず必要な訳ではありません)
以下は実際に書いたhamlの内容です
某スクールの諸先輩の記事を参考に記述しました
https://qiita.com/tk54_prog/items/149093cca9bdace71753
親と子の2段構造になっていて
●親はm-parentクラスで全て羅列しています
●子はm-childクラスでm-parentにひもづく子供を羅列してあります
実際の画面には関連する子供だけを表示すれば良いのでjQueryで必要部分のみの表示にしてあります
●孫クラスに関してはhttps://qiita.com/tk54_prog/items/149093cca9bdace71753を参考にさせてもらったのですが、うまくいかなかったため(処理もかなり重くなったため)
子クラスにidをふりajaxでコントローラーに飛ばし必要な孫カテゴリーのみを表示するようにしました(もしかしたら処理の関係で子クラスもajaxで飛ばした方がいいのかもしれません)
(↑はancestryテーブルです.childrenや.parentを該当レコードにつけて記述すると該当レコードの親のレコードや子レコードを返してくれます詳しくはancestryで調べていただければたくさん記事が出てきます)
jQueryについては参考にさせて頂いた記事とほぼ同じで
孫カテゴリーの記述と
アイコンが乗った時、外れた時の動作
を追記した程度ですどの記事も簡単にできると書いてあったのですが、書いてある通り真似しようとしたことでかなり時間を取られてしまいました
最初っからajaxを使って子クラス、孫クラスの必要な部分のみを挿入という形式にしておけばスムーズだったかもしれません
参考にした記事