yuminishi0309 / mavs-task-wp

採用課題用gulpボイラープレート
0 stars 0 forks source link

【ToDo】修正:トグルメニューの不具合 (blogページ) #2

Closed yuminishi0309 closed 10 months ago

yuminishi0309 commented 10 months ago

優先度:5(低 1〜5 高)

ページ:Blogページ 箇所:ページ内ナビゲーション( .blogListNav )

不具合:PCサイズの時、SPサイズ用トグルメニューのJS設定が効いていることにより、ナビゲーションをクリックするとナビゲーションが消える

予想される修正内容: ・画面サイズによる処理の分岐を追加 (JS) ・画面リサイズ時の処理を追加 (JS)

工数見積もり:1〜3時間

yuminishi0309 commented 10 months ago

変更点 ・画面サイズによる条件分岐を追加 ・画面リサイズ時に関数を再読み込みする処理を追加 ・上記改善後、トグルメニュー操作後のPC幅へのリサイズ操作の条件下で、slideToggleメソッドで付与されるcssスタイルが残存することによりPCサイズでスタイルの崩れが起きていたため、使用メソッドをtoggleClassへ変更

改善された点: ・PCサイズでナビゲーションクリック時にナビゲーションが消える現象が改善 ・画面リサイズ時に各画面サイズに合わせた処理が適用 ・トグルメニュー操作後のPC幅へのリサイズ操作の条件下での、スタイル崩れ(Navの位置が不適切/消える)の改善

工数:4時間 当初、slideToggleメソッドを使用していたためその中での条件分岐に挑戦し、メソッドで付与されたcssスタイルを画面幅リサイズ時に除去できずに苦戦して時間がかかりました。メソッドをtoggleClassに変更し、クラスの追加/除去を容易にすることで解決しました。

該当箇所: 下記URL内の下記ファイル https://github.com/yuminishi0309/mavs-task-wp/commit/bfd33784671df7f563c70ac7afe8d1a07c25baa2

app/product/assets/js/script.js app/src/sass/utility/_js.scss app/src/sass/page/_blog.scss