[ 解決済 ] ハンバーガーメニューの開閉速度を変更したい

[AE]

■ WordPress のバージョン
WordPress 5.8.2

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

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 14.13.3

■ Pro Unit のバージョン
バージョン 0.14.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
ハンバーガーメニューの開閉速度を少しゆっくりにする

■ 自分で試した事
.vk-mobile-nav {
transition: all 0.5s ease-out
}
の速度を変更。
他のcssの検討が付きませんでした。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
カスタマイズの相談です。

■ その他特記事項
ハンバーガーメニューの開く速度（上からメニューが降りてくる速度）の理想が、ネストされているメニューの開く速度（下矢印をタップしてメニューが開く速度）くらいになれば、と考えています。
どなたかお知恵を拝借できれば幸いです。
どうぞよろしくお願いいたします。

[うなこ]

追加されたCSSであっている気がします。

.vk-mobile-nav{
transition:all 0.5s ease-out;
}

ただ、0.5s のままですと現状の速さのままですので、たとえば1sなどに数字を変更しますとゆっくりになると思います。

もしうまくいかない場合は、サイトのURLを添付していただくと解決が早いかもしれません。

[対馬 俊彦]

設定箇所は

.vk-mobile-nav {
transition: all 0.5s ease-out;
}

で正しいです。0.5 を大きくすればご希望の動きに近づくと思います。

ease-out の部分を書き換えれば動きが変化します。

参考ページ ↓

https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=ja

すいません、念のため送信前に確認したつもりでしたが、うなこさんとダブっちゃいました。

• この返信は2年、 4ヶ月前に対馬 俊彦が編集しました。

[AE]

うなこさん、対馬さん、ありがとうございます。

すみません、説明が不足していました。
ご指摘いただいた数字を事前に変更していて、期待した動きにならなかったので質問いたしました。

【期待している動き】
ハンバーガーメニューをタップして、すぐにメニューが画面に表示（上から降りてくる）され、メニューが下がるスピードが現状(0.5s)と比べて少しゆっくりにしたいと考えています。

【現在の動き】
例えば、0.5sを3sに変更したとします。
ハンバーガーメニューをタップすると、アイコンが三から×になり、3s後にメニューが画面に表示（上から降りてくる）されます。
メニューが下がるスピードは数値を大きくすれば理想となるのですが、その数値と比例して画面にメニューが表示されるまでの時間が長くなってしまいます。

[対馬 俊彦]

> 3s後にメニューが…

ハンバーガーメニューって、けっこう上の方(-2000px)から降りてくる設定になっていて、
そのために画面に見えるまでの時間が生じています。

以下の CSS を追加すれば出てくるまでの時間を短縮できます。

.admin-bar .vk-mobile-nav.vk-mobile-nav-drop-in,
.vk-mobile-nav.vk-mobile-nav-drop-in {
top: -1000px;
}

【追記】
top: -1000px; のところを top: -100%; にしてみたら、タイムラグゼロで見えてきます。

• この返信は2年、 4ヶ月前に対馬 俊彦が編集しました。

[AE]

対馬さん、ありがとうございます！

ご教示いただいたcssをあてたところ理想通りになりました。
.admin-bar .vk-mobile-nav.vk-mobile-nav-drop-in,
.vk-mobile-nav.vk-mobile-nav-drop-in {
　top: -100%;
}

ハンバーガーメニューがそんな上にあるのは知りませんでした。
一つ勉強になりました、ありがとうございます！

[投稿者]

投稿