VOLLハンバーガーmenuボタンのアニメーション停止

[mai]

宜しくお願いいたします。

現在の環境は下記の通りです。
WordPress のバージョン：5.5.1
Welcart のバージョン： 1.9.33
Welcart専用の拡張プラグイン：
ご利用のテーマ：voll(子テーマ)
症状を確認したブラウザ：chrome　デベロッパーツール
サーバー：（会社名、サービス名）xserver
SSLの利用：（独自　常時SSL）

VOLLテーマのモバイル画面のハンバーガーメニューボタンの
アニメーションを停止したいのですが方法がわかりません。
たぶんstyle.css内のmenu-triggerに関する部分の
animation
transition
等々の部分が関係しているのではないかと考えています。

停止したい理由は、google search console内にて
CLSに関する問題が指摘されているためです。
画像がほぼ無いページにて指摘を受けているため
考えられることはcssによるレイアウトの変化が原因ではないかと？
推測しています。
別の原因の可能性もあるかもしれませんが、
まず可能性の高いものから順に対応したいと思っています。

ダウンロード後のハンバーガーメニューボタンの変化を
止める方法についてご教示お願い致します。

できればスピードアップするためにも、
貴社サイトのテーマ一覧画面のモバイルでのメニューボタンのように
フォントを利用できればと考えています。

宜しくお願い致します。

[yasumax]

こんにちは。

style.css内のmenu-triggerに関する部分の
animation

仰るとおりanimation部分で動きを設定しています。
ただ、この部分を外すとハンバーガーメニューが展開した時に「✕」に変形する動きがなくなります。

貴社サイトのテーマ一覧画面のモバイルでのメニューボタンのように
フォントを利用できればと考えています。

Welcart VOLLにも採用しているFont Awesomeを採用しています。
似たような指定でご利用いただけるかと思います。

[mai]

yasumax　様

ご回答有り難うございます。

現状はanimation等の速さを0sにすることで
見た目には動きは無いようにしています。

「✕」は1番目と3番目のspanを45度回転して表示している様なので
spanを無くすことはできない様です。

Font Awesomeのハンバーカーを採用して
closeの✕もFont Awesomeにしてcssでzindexを指定すれば
なんとかなるかも？
この質問は解決致しました。
有り難うございました。

[投稿者]

投稿