ドロワーメニューの動きがカクカクする

VWSとは フォーラム Lightning ドロワーメニューの動きがカクカクする

ドロワーメニューの動きがカクカクする

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #75302

    Takatoshi
    参加者

    ■ WordPress のバージョン
    6.2

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G2 )

    ■ テーマのバージョン
    14.22.8

    ■ スキンの種類
    Origin II

    ■ 期待する動作
    ドロワーメニューの動きをスムーズにしたいです。

    ■ 自分で試した事
    特に何もしていないです。

    ■ 症状が発生するブラウザ
    サファリ

    ■ 実際の症状
    ドロワーメニューのメニューをクリックすると右側に少しドロワーメニューが閉まる動きをし、リンク先へ飛んでいきます。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #75311

    うなこ
    モデレーター

    iphoneのsafariで見た時に、ページ遷移する時に2階層目のメニューを開くと、メニューが閉じようと(メニュースライド方向はドロップの場合)上に動くので、それを治したい、ということであっていますか。

    • この返信は1年、 5ヶ月前にうなこが編集しました。
    #75314

    Takatoshi
    参加者

    1階層目のテキストリンクも2階層目のテキストリンクをクリックすると、なったりならなかったりなのですが、ドロワーメニューが閉じようとする動きをします。
    一瞬だけカクッと上に閉まろうとする動きです。

    #75318

    うなこ
    モデレーター

    ページ遷移するときに、メニューが閉じますので、たしかに一瞬カクッとしますね(iPhoneのSafariで確認しました)。

    Lightningデモサイト

    何かいい方法がないか、考えてみます。
    もし他の方で、こんな方法があるなど、カスタマイズのアイディアがありましたら、ぜひ書き込みをお願いいたします🙇‍♂️

    • この返信は1年、 5ヶ月前にうなこが編集しました。
    #75328

    うなこ
    モデレーター

    私の方で考えてみたCSSです。
    ページ遷移するときに、メニューが方向:ドロップインの場合は下から上に、方向:左→右の場合は左から右に、方向:右→左の場合は右から左へ閉じますので、位置が固定で、ナビが透明になるようにしました。ナビが透明になるので移動してガタっとなるのは無くなるかなと思います。

    /*ナビを透明に*/
    .vk-mobile-nav {
    opacity:0;
    }
    /*openで不透明に*/
    .vk-mobile-nav.vk-mobile-nav-open{
    opacity:1;
    }
    
    /*ログイン時*/
    /* adminbarがあるので方向 ドロップインの場合はずらす */
    .admin-bar .vk-mobile-nav.vk-mobile-nav-drop-in{
    top: 46px;
    }
    
    /* ログアウト時 */
    /* 方向 ドロップインの場合 */
    .vk-mobile-nav.vk-mobile-nav-drop-in{
    top: 0px;
    }
    /* 方向 左 → 右*/
    .vk-mobile-nav.vk-mobile-nav-left-in{
    left: 0;
    }
    /* 方向 右 → 左*/
    .vk-mobile-nav.vk-mobile-nav-right-in{
    left: 0;
    }

    この他にも、なにかカスタマイズアイディアがありましたら、ぜひ書き込みよろしくお願いいたします。

    #75329

    アイディアというよりも、たまたま見つかっただけなのですが…

    私の Lightning サイトでメニューをクリックしてもモバイルナビが閉じないのがあって、
    調べてみたところ、その原因がわかりました。

    以下の手順でモバイルナビを閉じないようになります。

    【手順 1.】
    メニューのナビゲーションラベルを span タグで囲みます。
    添付画像をご参照ください。

    【手順 2.】
    以下の CSS を追加します。

    .vk-mobile-nav nav ul li a span {
        display: block;
    }

    テーマの .js をながめてみたところ、あんまり理解できていないのですが、
    なんとなく、裏技的というか、抜け穴を通り抜けて、たまたま結果オーライとなっている気がします。

    そんなわけで、自己責任でお願いします。

    Attachments:
    You must be logged in to view attached files.
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。