サポート » テーマ » メニュー表示について

  • 解決済 suzumiki

    (@suzumiki)


    はじめまして。
    テーマはLightningを使用しています。

    グローバルメニューの項目数と子ページの数が多く、PCでドロップダウン表示すると画面が見切れてしまい、スクロールしても画面全体が動くばかりで下の方にあるメニューをクリックすることができません。

    メニューだけスクロールさせる方法などありましたら教えてください。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • moyo55

    (@moyo55)

    グローバルメニューのドロップダウン(サブメニュー)にスクロールバーを表示するようCSSで設定すれば良いと思います。
    Lightningは使ってないのでデモサイトを見た限りですが…

    .gMenu>li>ul.sub-menu {
    	overflow-y: auto;
    	max-height: 400px!important;
    	height: auto;
    }

    のような記述をすれば高さのあるサブメニューにスクロールバーが表示されるようになるはずです。
    (max-heightの優先度対策で!importantをつけています。)

    メディアクエリもつけるなら…

    @media (min-width:768px) {
    	.gMenu>li>ul.sub-menu {
    		overflow-y: auto;
    		max-height: 400px!important;
    		height: auto;
    	}
    }
    スレッド開始 suzumiki

    (@suzumiki)

    ありがとうございます。
    スクロールを表示することはできましたが、下記があると親子になっているページを展開する「∨」ボタンをクリックしようとすると隣のメニューに移ってしまい、ボタンが押せません。

    max-height: 400px!important;
    height: auto;

    この記述を削除するとメニューが下まで表示されず……

    どのように対応すればいいでしょうか?
    初心者ですみませんが、何卒ご教示いただければ幸いです。

    • この返信は3ヶ月前にsuzumikiが編集しました。
    moyo55

    (@moyo55)

    overflowのautoやscroll(スクロールバーを表示する設定)は高さを指定しないと機能しない仕様になっています。

    テスト用ブログにLightningをインストールして試してみました。

    .device-pc .gMenu>li:hover>.sub-menu{opacity:1;max-height:1000px}
    .device-mobile .gMenu>li>.sub-menu.acc-child-open{opacity:1;max-height:1000px}

    でサブメニューの高さ指定を行っているようなので、以下のように追記してみてください。

    .device-pc .gMenu>li:hover>.sub-menu{
    	max-height: 400px;
    	overflow-y: auto;
    }
    • この返信は3ヶ月前にmoyo55が編集しました。

    念のため、補足しておきます。
    最初の記述

    .gMenu>li>ul.sub-menu {
    	overflow-y: auto;
    	max-height: 400px!important;
    	height: auto;
    }

    は削除して以下を記述する。という意味です。

    .device-pc .gMenu>li:hover>.sub-menu{
    	max-height: 400px;
    	overflow-y: auto;
    }
    スレッド開始 suzumiki

    (@suzumiki)

    お返事が遅くなり申し訳ございません。
    上記の記述で思い通りの動作ができました!

    本当にありがとうございました。

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