ドロワーメニューのクラスについて

♥ 0

いいねをした人: 居ません

このトピックには3件の返信、2人の参加者があり、最後にHatsukiにより5年、 3ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2019年8月9日 2:46 PM #24635

Hatsuki
閲覧者

♥ 6

【お使いの Snow Monkey のバージョン】v7.9.0
【お使いのブラウザ】Safari
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

ドロワーメニューってドロワーサブメニューも存在すると思うのですが、
両方のスタイルがc-drawer__menuクラスでliのクラス構造が同一な気がするんで、
ドロワーサブメニューだけスタイルをカスタマイズしたい時とかの場合はc-drawer__menuの〜と出来ますが、別々にスタイルをガッツリ分けるとかの応用時ではちょっと区分するのが難しい気がします。
上手く切り分けする場合ってどう言う感じでスタイル当てるのがベストでしょうか？

♥ 0

いいねをした人: 居ません

2019年8月9日 4:16 PM #24646

キタジマタカシ
参加者

♥ 2421

.p-drawer-sub-nav .c-drawer__item { ... } という指定でどうですかね？

♥ 0

いいねをした人: 居ません

2019年8月9日 4:44 PM #24649

Hatsuki
閲覧者

♥ 6

なるほど、と言うことは…完全に別々のスタイルを割り当てるとする場合は…

#drawer-nav>.c-drawer__menu .c-drawer__item {...}
で、ドロワーナビゲーション
（ >を入れないとサブナビゲーションまで影響してしまうっぽい)

#drawer-nav .p-drawer-sub-nav .c-drawer__item
で、サブナビゲーション

で切り分けるのが良い感じですか。
ちょいとやってみますー

♥ 0

いいねをした人: 居ません

2019年8月9日 5:00 PM #24651
Hatsuki
閲覧者

♥ 6
```
#drawer-nav {
	&>.c-drawer__menu {
		.c-drawer__item {
			...
		}
	}
	*+.c-drawer__sub-nav {
		.c-drawer__menu {
			.c-drawer__item {
				...
			}
		}
	}
}
```
な記述で完全に切り分けてスタイルカスタマイズする感じで一応、解決したんで記述しておきますー。
あざっす。閉じますー。

♥ 0

いいねをした人: 居ません
投稿者

投稿