-2

これが私が再現しようとしているものです: brit.co で、メニュー項目をクリックすると、テキストとアイコンの両方が白から黒に変わります。WordPress では、current-menu-item を 1 つのアイコンに設定して、すべてのアクティブなページに 1 つのアイコンが表示されるようにできますが、brit.co に示されているように、各ページに異なるアイコンを表示することはできません。

示されているコードは機能しますが、アクティブなアイコンはすべてのページで同じです。「current-page-item」は、各メニュー ページに設定したスタイルを尊重していません。これが WP で行われているのを見たことがなく、CSS だけではできないかもしれません。

#access .menu-style-page-1 a {
background:url('/wp-content/uploads/2012/10/menu-1-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
#access .menu-style-page-2 a {
background:url('/wp-content/uploads/2012/10/menu-2-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
/*** current_page_item styles are below ***/
#access .menu-style-page-1 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-1-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}

#access .menu-style-page-2 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-2-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
4

2 に答える 2

0

自分のものに直接飛び込むことなく、これはかなり簡単です。標準メニューは次のようなものです

<li id="menu-item-1" class="menu-item menu-item-1"><a></a></li>
<li id="menu-item-2" class="menu-item menu-item-2"><a></a></li>

リンクをクリックすると、すべてクラスが追加されますcurrent-menu-item

あなたはCSSでこのようなことをすることができます

#menu-item-1.current-menu-item { background: #f00; /*red*/ }
#menu-item-2.current-menu-item { background: #0f0; /*green*/ }

また、[外観]> [メニュー設定]で、[画面オプション]をクリックし、[クラス]のチェックボックスをオンにすると、カスタムクラスを追加できるため、次のことができます。

.aboutus.current-menu-item { background: #f00; /*red*/ }
.contactus.current-menu-item { background: #0f0; /*green*/ }

[外観]>[メニュー]で各メニュー項目にクラスを追加する必要があります。そしてあなたのCSSでは、あなたはする必要があります

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.other-class.current-menu-item { background-image: icon2.png no-repeat; }

上記の例では、.current-menu-itemだけでは、別のクラスが関係している場合にのみ、背景画像が表示されることはありません。

上書きしている場合は、次のようなものがあることを意味します。

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.current-menu-item { background-image: BADicon.png no-repeat !important; }

.current-menu-item上記の「カスケード」スタイルシートルールは上記の個々のスタイルを上書きするため、上記のコードは機能しません。（そして！importantはそれをオーバーライドするのに役立ちます）。

個人のインスタンスを削除し、それを実行.current-menu-itemするだけで機能します。.your-class.current-menu-item

于 2012-10-19T18:58:19.433 に答える
-1

解決しました。後続のエントリがオーバーライドされ、設計上想定され、php を変更する必要があるように見えるため、current-menu-item では機能しません。

解決策は簡単です。メニュー ID を使用して 1 つのスタイルを追加し、ページ ID を使用してページごとのスタイルを追加します。

メニュー: li#menu-item-26 a {background:url('whiteicon.png') no-repeat; 左パディング: 2em}

ページごとのメニューの表示方法: .page-id-2 li#menu-item-26 {background:url('blackicon.png') no-repeat; 左パディング: 2em}

于 2012-10-20T11:44:31.183 に答える