web-dev-qa-db-ja.com

強調表示された複数のメニュー項目

私は私のウェブサイトのCMSとしてWordPressを使っています。ナビゲーションメニューには、WordPressの内蔵ナビゲーションメニュー機能を使用しています。これにカテゴリ、ページなどを追加すると、current-menu-itemのように、スタイルを設定できる特定のクラスを含むリストが生成されます。

私の問題はここにあります：

  • 私のメニューにはいくつかのカテゴリがあり、いくつかの投稿は複数のカテゴリに割り当てる必要があります。

  • たとえば、投稿がCategory Aのみの場合、その投稿があるページにアクセスすると、メニューでCategory Aが強調表示されます。

  • 投稿がCategory AとCategory Bにある場合、その投稿があるページにアクセスすると、Category AとCategory Bが両方ともハイライトされます。

投稿が複数のカテゴリに属している場合でも、1つのメニュー項目だけを強調表示するにはどうすればよいですか。

categoriesmenusnavigationcustomization
1
Angus

この質問も stackoverflow で尋ねられました。これは私がそこに与えた答えのコピーです：

おそらくnth-of-type CSS3セレクタを使ってそれをスタイルすることができます。

.current-menu-item:nth-of-type(1) {
    background:#ffff00;
    /* Highlight styles */
}

これらのスタイルは、最初に出現する.current-menu-itemのみをターゲットにします。同様に、nth-of-type(2)などで秒をターゲットにすることを選択できます。

2
Just Thomas Misund

私はこの質問は古く、選択された答えがないことを知っていますが、私は先にトーマスの回答を詳しく述べ、拡張したいと思います。 n番目の型セレクタはかなりサポートされていますが、古いバージョンのIE <9ではサポートされていません。

私の解決策は、代わりにもっと広くサポートされている最初の子のセレクタを使うことでしょう。

.current-menu-item:first-child {
    background:#ffff00;
    /* Highlight styles */
}
2
Dwayne Charrington

それはホットリンクの問題かもしれません。

このサイトから http://www.wildpop.ca （Wildpop dot.ca）にアクセスしてください。メニューをクリックすると、 "Monthly Packages"ページのようなものが表示されます。メニュー内のSEOリンクには独自のページはありません。これは別のページに含まれている（seo_direct）というセクションへの直接リンクですが、メニューをもう一度見ると - 両方のメニューオプションが[アクティブページ]として強調表示されています。

これがあなたの問題ではないことを確認してください。

0
dave wild