チーム開発 カテゴリ機能実装 ドロップダウンメニュー作成（JQuerry）２

タスク

step1　categoryモデル作成〜DB作成　済

step2　topページ　ヘッダーのドロップダウンメニュー作成

step3　商品出品機能との連携

作業手順

・jQuery導入　済

・ドロップダウンメニュー作成　済

・jQueryで動きをつける

・DB連携

jQueryで動きをつける

今回作成するメニューイメージは下記です。

ビジネスロジックは下記で考えました。
参考：jQueryで簡単ドロップダウンメニュー | Tech dig

1. 「カテゴリ」にhoverさせた際にドロップダウンの親リストが表示される
▶︎addClassメソッドを使用。予めcssでつけていた、display: none;　に、　display: block;　を付与しました。

2. 親リストにhoverさせた際に子リストが 表示される
▶︎同上

3. 子リストにhoverさせた際に孫リストが表示される
▶︎同上

4. リストからhoverを外した際にリストが非表示にされる
▶︎removeClassメソッドを使用。

5. hoverしたリストの文字色を変える
▶︎CSSで対応。

躓き

・ヘッダーメニューから、ドロップダウンで表示されたリストにカーソルを移そうとすると、表示が消えてしまう。
▶︎ヘッダーメニューとドロップダウンリストの間に隙間があったことが原因でした。cssのposition, paddingプロパティで調整し解決。

・子リストから、親リストにカーソルを戻そうとすると、表示が消えてしまう。
▶︎リスト同士の間隔がピッタリだった為、ゆっくり動かすと境目で上記問題が起こると判明。リストの幅を広げ、少し重ねることで解決。