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

[Takatoshi]

■ WordPress のバージョン
6.2

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

■ テーマの種類
Lightning ( G2 )

■ テーマのバージョン
14.22.8

■ スキンの種類
Origin II

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

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

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

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

---

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

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

[うなこ]

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

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

[Takatoshi]

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

[うなこ]

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

Lightningデモサイト

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

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

[うなこ]

私の方で考えてみた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;
}

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

[対馬 俊彦]

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

私の 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.

[投稿者]

投稿