# メニューの子カテゴリ

**URL:** <https://www.nocode-faq.com/t/topic/2506>\
**Category:** bubble\
**Tags:** フロントエンド\
**Created:** [2022 年 1 月 5 日午後 2:16 UTC](https://www.nocode-faq.com/t/topic/2506 "2022-01-05T14:16:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yusuke](https://avatars.discourse-cdn.com/v4/letter/y/ad7895/32.png) [@yusuke](https://www.nocode-faq.com/u/yusuke)\
**Post date:** [2022 年 1 月 5 日午後 2:16 UTC](https://www.nocode-faq.com/t/topic/2506/1 "2022-01-05T14:16:55Z")

</div>

###・前提条件 ・発生している問題・エラーメッセージ ・実装したい機能

> **[一枚板 一枚板テーブル 再生一枚板の通販 rewood | 再生した一枚板を販売](https://re-wood.jp/)**
>
> 循環型一枚板リウッドの通販サイト。全国から使われていた一枚板を買取再生し、ダイニングテーブル、カウンター材など家具、建材、雑貨として、住まい・店舗・オフィスへ販売しています。

二点質問があります。

一点は、すごく初歩的な質問かもしれません。  
こちらのサイトのように、メニューにマウスオーバーした際  
子カテゴリが出てくるかと思いますが、bubbleではどのように実装するのが  
最適でしょうか？

最適な方法をご教示いただけませんでしょうか。

二点目は、bubbleのディレクトリに関してですが、  
公開したURLで

[https://abc.com/mypage/user](https://abc.com/mypage/user)  
[https://abc.com/mypage/buy](https://abc.com/mypage/buy)

などのようにディレクトリの親子関係は作れますでしょうか？

### スクリーンショット

 ![d6bb0777-b73b-4178-9044-2556666b7257](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/ba3097e8d3696c6b5b12c413f05463e9fc7f2028.jpeg)

### 試したこと

コンディショナルでホバーで対応してみようと思いましたが、メニューからマウスが離れると  
消えてしまいます。

また、クリックした際にelement actionの showも試しましたが、  
一度表示されると出っぱなしになりました。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2022 年 1 月 6 日午後 1:45 UTC](https://www.nocode-faq.com/t/topic/2506/2 "2022-01-06T13:45:39Z")

</div>

conditionalで、今つけているhover対象と、さらに、そのメニューそのものにもhover対象として扱えば、思った挙動になると思います。

 ![スクリーンショット 2022-01-06 22.43.09](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/95e357b4ebfe155595982ffacba03d1c9614bba3.png)

ディレクトリを作るのはできません。基本は1ページ構成になります。  
ただ、下のツイートにあるプラグインを利用すれば、見た目上だけはディレクトリのように挙動してくれます。

> <https://twitter.com/NoCoder_K/status/1342137773516472321?s=20>

あくまでURLをそう見せているだけであって、結局はGroupなどをconditionalで表示非表示するだけですが。。

---

<div class="post-metadata">

**Author:** ![yusuke](https://avatars.discourse-cdn.com/v4/letter/y/ad7895/32.png) [@yusuke](https://www.nocode-faq.com/u/yusuke)\
**Post date:** [2022 年 1 月 6 日午後 2:31 UTC](https://www.nocode-faq.com/t/topic/2506/3 "2022-01-06T14:31:44Z")

</div>

> [@K.nakata](#):
>
> conditionalで、今つけているhover対象と、さらに、そのメニューそのものにもhover対象として扱えば、思った挙動になると思います。

ありがとうございます！ボタンとグループを引っ付ければたしかにそのようになりました！

ディレクトリはあまり理解できていないかもしれないのですが、通常の設定では階層分けできないんですね。。

少しワードプレスなどを触ってきた身でして、簡単にできそうなものがそうではなかったりする部分が悩ましいです。

---

<div class="post-metadata">

**Author:** ![K.nakata](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/k.nakata/32/1810_2.png) [@K.nakata](https://www.nocode-faq.com/u/K.nakata)\
**Post date:** [2022 年 1 月 6 日午後 3:30 UTC](https://www.nocode-faq.com/t/topic/2506/4 "2022-01-06T15:30:41Z")

</div>

ボタンとGroupをピッタリつけたくない場合は、背景色透明のメニューGroupを作ってそこにconditionalを追加し、内側に少し上の余白開けた状態で背景色付きのGroupをおくなどすれば良いと思います！

---

<div class="post-metadata">

**Author:** ![yusuke](https://avatars.discourse-cdn.com/v4/letter/y/ad7895/32.png) [@yusuke](https://www.nocode-faq.com/u/yusuke)\
**Post date:** [2022 年 1 月 6 日午後 5:02 UTC](https://www.nocode-faq.com/t/topic/2506/5 "2022-01-06T17:02:23Z")

</div>

おっしゃるとおりの方法でいけました！  
工夫次第でいろいろできますね。

丁寧にありがとうございます！