ハンバーガーメニューを再度タップするまで開いたままにしたい

[nanashisan]

■ WordPress のバージョン
6.0.3

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

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.17.5

■ スキンの種類
Fort II

■ スキンのバージョン
6.1.1

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

■ 期待する動作
ハンバーガーメニューについて質問です。

ハンバーガーメニューをタップすると、当然ですがメニューが開きます。 そしてメニューの中の任意のページをタップすると、そのページに遷移します。

その際に、スマホの画面下部の左矢印を押したり、または画面を右にスワイプすることで、元の画面に戻りますが、その時にメニューは閉じてしまっています。

この時、メニューが閉じないようにするにはどうしたらよいでしょうか。

つまり、もう一度ハンバーガーメニューを押して「閉じる」とやるまで、メニューを開きっぱなしにしたいのです。

ご教授頂けましたら幸いでございます。
何卒宜しくお願いいたします。

■ 自分で試した事
cssを触るだけでは何も変わりませんでした。

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

■ 実際の症状
開いたハンバーガーメニューが、デフォルトでは、前の画面に戻ると閉じてしまっている。

[石川＠Vektor,Inc.]

Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。

メニューが開きっぱなしだと、ページが遷移してもユーザーは遷移した事に気づかないので「メニューをタップしても画面遷移しない！」と思われたり、「移動した先のページを見たいのにいちいち閉じるボタンをタップしないといけない！」とユーザーに不快感を与える可能性が高いため、おすすめしていません。

上記理由で推奨しない仕様ですので、公式サポートとしてコードを書いて紹介するという事はいたしませんが、どうしてもという場合は、

そもそも別のページに移動してしまうので、情報の受け渡しをする必要があります。

手法としては JavaScript を使って

1. ハンバーガーメニュー内のリンク要素に対してリンク先URL末尾に ？menu=open など識別用のパラメーターがつくようにする
2. ページを開いた時に、表示中のURLを取得、該当のパラメータがついてた場合は
.vk-mobile-nav に対してクラス名 vk-mobile-nav-open を追加
.vk-mobile-nav-menu-btn に対してクラス名 menu-open を追加

というプログラムを書けばおそらくできると思いますので、ご自身で書くか、
WordPress を JavaScript でカスタマイズを加える事ができる人に上記情報を渡して依頼すれば実現はできると思います。

• この返信は1年、 9ヶ月前に石川＠Vektor,Inc.が編集しました。

[nanashisan]

ご回答ありがとうございます。

私の質問が不正確で申し訳ありません。

①、ハンバーガーメニューを押すとメニューが出てくる。
②、出てきたメニューの中から、任意のページを押す。
③、押したページに遷移する。（この時ハンバーガーメニューは閉じている）
④、スマホ下部の矢印などを押して、一つ前のページに戻る。
⑤、すると、先程出したハンバーガーメニューが開いたままにになっており、またハンバーガーメニューを押さなくても、そのまま各ページを選ぶことができる。

この様な動作です。

何卒宜しくお願い申し上げます。

[石川＠Vektor,Inc.]

端末やブラウザで戻るボタンを押された時にも状態データの受け渡しをしないとけいないとなると、それなりに時間をかけて検証しないと私の方ではわかりません。
また、出来たとしてもかなりの開発費とメンテナンス費が発生してくるので費用対効果を考えると現実的ではないかなと思います。

他に簡単にできそうな方がいましたらよろしくお願いいたします。

[対馬 俊彦]

② の操作を行うとハンバーガーメニューが閉じるのが Lightning の仕様なので、
閉じないようにするのは難しそうですが…

試しに以下の jQuery を書いたらメニューが閉じないようになりました。

$(".vk-mobile-nav li > a").click(function(){
  $('.vk-mobile-nav').addClass('vk-mobile-nav-open');
  $('.vk-mobile-nav-menu-btn').addClass('menu-open');
});

ただし、これはテーマ側で行っている処理と喧嘩するので、
たまたまうまくいってるだけで、実行のタイミングによっては
期待通りの結果にならないかもしれません。(未検証です)

どうしてもハンバーガーボタンを使いたいのであれば、
PHP / jQuery 等のスキル(勉強)が必要になりますが、
デフォルトのハンバーガーボタンを display:none; で非表示にして、
クリックで閉じないハンバーガーメニューを独自に実装するのが
確実な方法だと思います。

ハンバーガーボタンにこだわならいのであれば、固定ページでメニューを作って、
このページ経由で閲覧してもらうようなやり方も検討するといいかもしれません。

[投稿者]

投稿