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

メニュー表示について

  • 解決済 suzumiki

    (@suzumiki)


    3年、 2ヶ月前

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

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

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

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

    (@moyo55)

    3年、 2ヶ月前

    グローバルメニューのドロップダウン（サブメニュー）にスクロールバーを表示するよう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)

    3年、 2ヶ月前

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

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

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

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

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

    (@moyo55)

    3年、 2ヶ月前

    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年、 2ヶ月前にmoyo55が編集しました。
    moyo55

    (@moyo55)

    3年、 2ヶ月前

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

    .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)

    3年、 1ヶ月前

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「メニュー表示について」には新たに返信することはできません。

表示