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

VWSとは フォーラム Lightning [ 解決済 ] ハンバーガーメニューについて

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

  • このトピックには15件の返信、4人の参加者があり、最後にmasako.sにより6ヶ月、 1週前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • 投稿者
    投稿
  • #52100

    masako.s
    参加者

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

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

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

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

    #52103

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

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

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

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

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

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

    #52107

    DRILL LANCER
    モデレーター

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

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

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

    • この返信は6ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は6ヶ月、 1週前にDRILL LANCERが編集しました。
    #52118

    masako.s
    参加者

    対馬様

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

    #52119

    masako.s
    参加者

    DRILL LANCER 様

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

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

    #52121

    DRILL LANCER
    モデレーター

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

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

    #52122

    masako.s
    参加者

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

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

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

    #52123

    グローバルメニューには

    HOME 案内1 案内2 その他(ここに下階層を設定する)

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

    #52124

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

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

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

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

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

    いかがでしょうか?

    Attachments:
    You must be logged in to view attached files.
    #52126

    masako.s
    参加者

    石川様

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

    #52127

    masako.s
    参加者

    対馬様

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

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

    #52128

    masako.s
    参加者

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

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

    #52129

    以下の 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.
    #52131

    masako.s
    参加者

    対馬様

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

    #52132

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

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

    • この返信は6ヶ月、 1週前に対馬 俊彦が編集しました。
15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • このトピックに返信するにはログインが必要です。