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

フォーラム テンプレート(テーマ) VOLLハンバーガーmenuボタンのアニメーション停止

  • このトピックには2件の返信、2人の参加者があり、最後にmaiにより3年、 5ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #91017
    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によるレイアウトの変化が原因ではないかと?
    推測しています。
    別の原因の可能性もあるかもしれませんが、
    まず可能性の高いものから順に対応したいと思っています。

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

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

    宜しくお願い致します。

    #91038
    yasumax
    キーマスター

    こんにちは。

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

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

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

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

    #91041
    mai
    参加者

    yasumax 様

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

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

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

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。