Different classes for wordpress sub-menus

0 Views

I’m using WordPress’ wp_nav_menu to display my main navigation.
Trying to recreate the following piece of HTML in wordpress however seems quite complicated.

front end menu

Read More

Here is the HTML version (classes in the wordpress stylesheet have been adjusted to target the ones wordpress uses): 

<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 -->

What the problem in wordpress is that I used a walker to add the div around my first sub-menu that keeps everything in place. This way though, it adds the 2 divs (subnav and holder) to every sub-menu following.

How can I edit the next depth level to
– not add the 2 divs
– edit the class name of the sub-menu 

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";
Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Why do you need to add classes to the submenus to target them with CSS? Can’t you just do something like this:

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

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

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

    Here’s a jsfiddle illustrating the concept: http://jsfiddle.net/3XtkE/