サブメニュー第2階層の表示について

VWSとは フォーラム Lightning サブメニュー第2階層の表示について

サブメニュー第2階層の表示について

  • このトピックには4件の返信、3人の参加者があり、最後にzoomにより2年、 11ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #50831

    zoom
    参加者

    ■ 利用テーマとバージョン :lightning pro 8.9.5

    ■ 質問内容:
    現在、第1階層のテキスト右に下向きの矢印が表示され、矢印をクリックするとその下に第2階層のテキストが表示されます。
    現在作成中のページが多く、この第2階層のテキストを第1階層テキストの右に表示させたいのですが、カスマイズ可能かどうかご教示いただけると大変ありがたいです。

    #50833

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

    ちょっと回答が難しいのですが、

    現在、第1階層のテキスト右に下向きの矢印が表示され、矢印をクリックするとその下に第2階層のテキストが表示されます。

    PCの場合はマウスオーバーで展開するため下向き矢印は表示されないはずなのでおそらくタブレットかスマートフォンなどで作業されているという状態でしょうか?

    現在作成中のページが多く、この第2階層のテキストを第1階層テキストの右に表示させたいのですが、カスマイズ可能かどうかご教示いただけると大変ありがたいです。

    どういったレイアウトを希望されているのか想定できないので、図か何かアップいただけると助かりますが第一階層のテキストの右側にはすぐ別の項目があるので、カスタマイズでも難しいのではないかなという印象ではあります。

    それだけ項目が多いという事は階層構造を見直すのも一つの手段ではないかと思います。
    ※サイトの内容・趣旨を把握しているわけではないので的外れでしたらすみません。

    #50834

    zoom
    参加者

    ご回答いただき、ありがとうございます
    私の質問の仕方が間違っていました
    質問の中で、第1階層→第2階層、第2階層→第3階層と修正させていただきます
    確かに、現在作成中の第3階層が第2階層の右に表示されても、縦表示となりリンク先が多すぎすので
    少し整理するようにしますが、第3階層を例えば2列に表示するというカスタマイズは相当難しそうですね

    #50847

    以下の CSS を追加すればできると思います。

    ■孫メニューを右に開く CSS の例
    https://lightning.uonuma-js.com/menu-open-right/

    @media (min-width: 992px) { 
    
    .gMenu>li:hover>.sub-menu {
        overflow: visible;
    }
    
    .vk-menu-acc ul.sub-menu ul.acc-child-open,
    .vk-menu-acc ul.sub-menu ul.acc-child-close {
        position: absolute;
        left: 100%;
        top: 0px;
        width: 240px;
        background-color: #191919;
    }
    
    }

    ■孫メニューを2列で表示する CSS の例
    https://lightning.uonuma-js.com/menu-2-columns/

    @media (min-width: 992px) { 
    
    .gMenu>li:hover>.sub-menu {
        overflow: visible;
    }
    
    .vk-menu-acc ul.sub-menu ul.acc-child-open,
    .vk-menu-acc ul.sub-menu ul.acc-child-close {
        position: absolute;
        left: -50%;
        width: 480px;
    }
    
    .vk-menu-acc ul.sub-menu ul.acc-child-open li,
    .vk-menu-acc ul.sub-menu ul.acc-child-close li {
        width: 240px;
        float: left;
        background-color: #333333;
    }
    
    .vk-menu-acc ul.sub-menu ul.acc-child-open li a,
    .vk-menu-acc ul.sub-menu ul.acc-child-close li a {
        border-right: 1px solid rgba(255,255,255,.15);
    }
    
    }

    メニュー項目の数が多い場合は、以下のブロックのどれかを使って固定ページを作った方が見やすくなるかもしれません。

    ・子ページリスト
    ・選択投稿リスト
    ・カード

    #50904

    zoom
    参加者

    ありがとうございました
    どうしても第3階層のメニューが多すぎるので、クライアントと相談して減らすかページ遷移方法を変えるようにします

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。