1

wp_nav_menuメイン ナビゲーションを表示するためにWordpress を使用しています。ただし、Wordpress で次の HTML を再作成しようとすると、かなり複雑に思えます。

フロントエンドメニュー

HTML バージョンは次のとおりです (wordpress スタイルシートのクラスは、wordpress が使用するものを対象とするように調整されています)。

<ul class="nav">
<li class="home"><a href="#">Home</a></li>
<li><a href="#">Store</a>
    <div class="subnav">
        <div class="holder">
            <ul class="child">
                <li><a href="#">Category 1</a>
                    <ul class="grandchild">
                        <li><a href="#">Sub-category 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Category 2</a>
                    <ul class="grandchild">
                        <li><a href="#">Sub-category 1</a></li>
                        <li><a href="#">Sub-category 2</a></li>
                    </ul> <!-- Grandchild -->
                </li>
            </ul> <!-- Child nav -->
        </div> <!-- Holder -->
    </div> <!-- Subnav -->
</li></ul><!-- nav -->

ワードプレスの問題は、ウォーカーを使用して最初のサブメニューの周りに div を追加し、すべてを所定の位置に保持していたことです。ただし、この方法では、2 つの div (サブナビとホルダー) が後続のすべてのサブメニューに追加されます。

次の深さレベルを編集して、2 つの div を追加しないで、サブメニューのクラス名を編集するにはどうすればよいですか?

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<div class=\"subnav\" ><div class=\"holder\"><ul class=\"sub-menu\">\n";

function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent</ul></div></div>\n";
4

1 に答える 1

1

サブメニューにクラスを追加して、CSS でターゲットにする必要があるのはなぜですか? 次のようなことはできませんか？

#nav > li a {
    /* Target first level */
}

#nav > li > ul > li a {
    /* Target second level */
}

#nav > li > ul > li > ul > li a {
    /* Target third level */
}​

概念を説明する jsfiddle を次に示します: http://jsfiddle.net/3XtkE/

于 2012-12-06T07:20:17.800 に答える