[ 解決済 ] ハンバーガーメニューについて

[masako.s]

■ 利用テーマとバージョン :Lightning Proバージョン: 8.9.9

■ 質問内容：
モバイルの時に出てくる三本線メニュー（ハンバーガーメニュー）をパソコンの時にも表示できますか？
また、表示できるテーマやプラグイン（有料）の取り扱いはありますか？

メニューが多いので、ヘッダーメニューに5つほど通常のメニュー表示をし、隅っこに三本線メニュー（ハンバーガーメニュー）を表示させたいと思っています。

ご教示のほど宜しくお願い致します。

[対馬 俊彦]

モバイルの時に出てくる三本線メニュー（ハンバーガーメニュー）をパソコンの時にも表示できますか？

ご質問者がやりたいこととは違うかもしれませんが、
単純にモバイルナビと同じものをパソコンでも表示したいのであれば、
以下の CSS でいけると思います。

@media (min-width: 992px) {
body.device-pc .vk-mobile-nav-menu-btn,
body.device-pc .vk-mobile-nav {
  display: block;
}
}

メニューが多いので、ヘッダーメニューに5つほど通常のメニュー表示をし、隅っこに三本線メニュー（ハンバーガーメニュー）を表示させたいと思っています。

モバイルナビと違う中味のハンバーガーメニューを実現するのは難しそうです。

こだわりがなければ、ナビゲーションメニューを階層構造にするのが楽でよいと思います。

[DRILL LANCER]

モバイルナビと違う中味のハンバーガーメニューを実現するのは難しそうです。

Header Navigation　⇒ PC 用のグローバルナビゲーション
Mobile Navigation　⇒ モバイル用のグローバルナビゲーション
と別れているので PC とモバイルを分けるのは可能です。

ただし、モバイル時にメニューを２つ表示するのは不可能ですのでそのことを指しているのなら済みません。

[masako.s]

対馬様

いつもありがとうございます。
モバイルメニューとパソコンメニューは同じなのですが、
パソコンメニューは　HOME　案内１　案内２　だけはグローバルメニューに表示
その他の下層メニューをハンバーガーメニューに隠したい。
モバイルメニューは、全部ハンバーガーメニューに。
という感じです。

[masako.s]

DRILL LANCER　様

いつも大変お世話になっております。
下記の様な要望も可能と言うことでしょうか。
有償でも構いませんが、テーマやプラグインなどの取り扱いがありますか？
それとも、CSSで作る感じですか？

モバイルメニューとパソコンメニューは同じなのですが、
パソコンメニューは　HOME　案内１　案内２　だけはグローバルメニューに表示
その他の下層メニューをハンバーガーメニューに隠したい。
モバイルメニューは、全部ハンバーガーメニューに。

[DRILL LANCER]

その他の下層メニューをハンバーガーメニューに隠したい。

私もメニューを階層構造にしたほうが良いと思います。
「下層」という言葉から私は階層構造を連想したというのが理由です。

[masako.s]

ありがとうございます。
それが、下層であって下層ではないのです。

グローバルメニューには
HOME　案内１　案内２　　三（ハンバーガーメニュー）　とし、
ハンバーガーメニューの中には商品の一覧があるみたいな感じです。

こういうのは御社のテーマでは不可能でしょうか？

[石川＠Vektor,Inc.]

グローバルメニューには

HOME　案内１　案内２ その他（ここに下階層を設定する）

という運用ではだめでしょうか？

[対馬 俊彦]

その他の下層メニューをハンバーガーメニューに隠したい。

一般的な右上にあるハンバーガーメニューの動きをイメージされているのであれば、
ご希望のことを実現するのは、不可能ではありませんが、難しそうです。

なんちゃってハンバーガーであれば、かんたんなやり方があります。
添付画像をご参照ください。

ナビゲーションラベルに <i class="fas fa-bars"></i> と入力すれば、
見た目はそれらしくなりますし、URL の欄を空にしておけば
ハンバーガーボタンのリンクは解除されます。

メニューに追加するときには URL を空にできませんが、あとから空にすることはできます。

いかがでしょうか？

Attachments:

You must be logged in to view attached files.

[masako.s]

石川様

ありがとうございます。
無理そうですね・・・ありがとうございます。

[masako.s]

対馬様

ありがとうございます。
おもしろいアイデアです。
先の回答のCSSも今後使うかもしれないので保存しておきます。

いつもありがとうございます。m(._.*)m

[masako.s]

こんな風にしたかったんです。
今更ですが見つけました。
こちらのテーマだと不可能と言うことなので今回は諦めます。
ありがとうございました。

https://www.miyakohotels.ne.jp/osaka/index.html/

[対馬 俊彦]

以下の CSS を追加すると、
見た目が添付画像のようにハンバーガーっぽくなりますよ。

.gMenu_name .fa-bars {
  color: #999;
  border: 1px solid #999;
  font-size: 22px;
  padding: 5px;
  border-radius: 3px;
  margin-top: -8px;
}

Attachments:

You must be logged in to view attached files.

[masako.s]

対馬様

追加アドバイスありがとうございます。
それも良いですね！
やってみます。

[対馬 俊彦]

こんな風にしたかったんです。

不可能ではありませんが…
Lightning Pro でここまでやるのであれば、ハイレベルなカスタマイズのスキルが必要です。

[投稿者]

投稿