メニュー表示について

解決済 suzumiki
(@suzumiki)

3年、 9ヶ月前

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

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

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

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

moyo55
(@moyo55)

3年、 9ヶ月前
グローバルメニューのドロップダウン（サブメニュー）にスクロールバーを表示するよう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年、 9ヶ月前
ありがとうございます。
スクロールを表示することはできましたが、下記があると親子になっているページを展開する「∨」ボタンをクリックしようとすると隣のメニューに移ってしまい、ボタンが押せません。

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

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

どのように対応すればいいでしょうか？
初心者ですみませんが、何卒ご教示いただければ幸いです。
- この返信は3年、 9ヶ月前にsuzumikiが編集しました。
moyo55
(@moyo55)

3年、 9ヶ月前
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年、 9ヶ月前にmoyo55が編集しました。
moyo55
(@moyo55)

3年、 9ヶ月前
念のため、補足しておきます。
最初の記述
```
.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年、 9ヶ月前

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

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