[Kmical Lights]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

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

===
・親ページ(parent)
・親ページ / 子ページ(parent/child)
を生成し、メニューに並列に置いた場合、
親ページ/子ページ(parent/child) を開いた際に、親ページ(parent)の方のメニューにも下線または背景色が表示される。

この場合には親子の関連性を持つので、親ページ(parent)のメニューにも下線が生じるのは動作的には正であるが、どのメニューが実際の表示ページとなっているのか、複数のメニューがアクティブとして表示されてしまうので解りにくい。親と子のアクティブなクラス関係を別にして視覚クラスの分類を区別化できるようにしてほしい。

—

基本は、子ページは親ページのメニューとして入れる…で良いと思うが、
・ショップ(shop)
・セール商品(shop/sale)
的な一時的に子ページを目立たせたい場合にメニューを並列化する場合もあるので、その場合に複数のメニュー項目に下線が付くなどを避けたい。

♥ 0

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

[キタジマ タカシ]

んーこれはちょっといろいろ難しそうな気がしますね…。

.menu-item-15[data-active-menu="true"] {
  ...
}

みたいにして CSS で調整してもらうことはできると思いますが、テーマ側でなんらか対処したほうが良さそうということでしょうか？ class を分けたとしても見た目を変えるわけにはいかないので、結局どちらの class にも同じスタイルを当てることになりますし、親、子だけでなく、では孫、ひ孫はみたいになることも考えられると思うので、解決にはならない気がして。

♥ 0

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

[Kmical Lights]

そうですねー。
滅多な事では並列のメニューにしないとも思えますが、孫、ひ孫の時と言うケースも存在するんですよね…。

となりますと、特定のメニュー項目の下線を外すなどの場合、フックでpost IDなどを基にして下線などの装飾クラス(data-active-menu=”true” ?)を置換するのがベストですか？

♥ 0

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

[キタジマ タカシ]

んー対応する人の主義や趣味によるんでしょうけど、僕ならフックじゃなくて CSS の上書きで対応すると思います。

♥ 0

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

[Kmical Lights]

やりたいパターンによって変化すると思いますが、この部分のCSSの上書きのベストプラクティスってどうするべきなんでしょう？

♥ 0

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

[キタジマ タカシ]

んーベストプラクティスというのはどういう意味でしょう…？ セレクタの、という意味であれば、僕が先に書いたセレクタだと詳細度が弱いみたいなので、

.p-global-nav .menu-item-15[data-active-menu] {
  ...
}
.p-global-nav .menu-item-15[data-active-menu] > a {
  ...
}

上記以上のセレクタの詳細度で上書きするのが良さそうです。

♥ 0

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

[Kmical Lights]

んー、パターンに合わせて、記載されている以上の詳細度を使用したスタイルカスタマイズをする形で対応するのが良さそうですね。

一応の解決策は理解できたので、クローズします。

♥ 1

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

[投稿者]

投稿