Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

To start... I am new to Wordpress and developing themes.

I've got a main menu which I've placed in my header using the following code:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'topNav', 'after' => '<span> </span>' ) ); ?>

I've also defined my menu like so:

Menu Definition

It works out as I desire (well, mostly):

Page View

Now, I want to display a sub menu in the white page content area below. The sub menu would display just like the main menu (ContentTopNavigation). So, if the menu were set up like (demonstration purposes only):

Sub Menu Definition

And the STORE main menu item were selected, the STORE page would have a menu at the top which shows the 3 sub menu items.

How do I make this relation ship automatic? Meaning, the sub menu for the page is automatically shown based on the top level menu item shown.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

If your developing this theme with your own html mark up and css then should be fairly easy...

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'topNav', 'after' => '<span> </span>' ) ); ?>

You will notice this menu PHP generates a unordered list with your sub menu as a nested unordered list.

See your generated markup in the dom, it will look like this sort of...

<ul class="menu">

    <li class="menu-item">
        <a href="...">Home</a>
    </li>

    <li class="menu-item current-menu-parent">  
        <a href="...">Store</a>

        <ul class="sub-menu" style="display: none;">

            <li class="sub-menu-item">
                <a href="...">My Account</a>
            </li>

            <li class="sub-menu-item current-menu-item">
                <a href="...">Track your order</a>
            </li>

            <li class="sub-menu-item">
                <a href="...">Checkout - Pay</a>
            </li>

        </ul>

    </li>

    <li class="menu-item">
        <a href="...">Workshop</a>
    </li>

    <li class="menu-item">
        <a href="...">Gallery</a>
    </li>

</ul>

You can see in the markup that wordpress generates a class for each element.

And when your menu item is active, wordpress add's active class current-menu-item or current-menu-parent to the li's

So using some jquery like below, you can control visibility of those sub elements...

var allSubmenus = $('.sub-menu').hide();
// this variable makes all sub menu ul's 'display: none;'

$('li.current-menu-parent, li.current-menu-item').find('ul').show();
// if these li's have current class's, they're set to 'display: block', this is for page reloads so the current menu is visible on page load.

$('li.menu-item a').click(function() {
    allSubmenus.hide();
    $(this).parent().find('ul').show();
});
// this basically, when a menu link is clicked, hides all sub menu's using our variable, then finds any child ul's (sub menu) and set's to 'display block'

Then after this, you have to be clever with your css and position your ul.sub-menu absolute to the parent ul.menu { position: relative } - and make sure the li.menu-item and ul.menu overflow is set to visible, but li.menu-item has to have NO positioning.

Let me know if you can't figure out the CSS.


UPDATE

I pretty much just realised, if your sub menus only appear on the current-menu-item page itself, and you don't wan't the sub menu to appear whilst on another page from the main menu... then you simply just set your css like this, no jQuery needed... (but using the same css method mentioned above too)

ul.menu {
   position: relative;
   overflow: visible;
}

li.menu-item {
   /* No positioning */
   overflow: visible;
   float: left;
}

ul.sub-menu {
   display: none;
   position: absolute;
}

li.sub-menu-item {
   float: left;
}

li.current-menu-parent ul,
li.current-menu-item ul {
   display: block !important;
}
share|improve this answer
    
Thanks for the detailed response. That was very helpful. I have gone the non-jquery route. I think I have the CSS as you had in mind. Using the It certainly displays in the white content area, however, it also overruns that content which is not desirable. This is purely a CSS issue now unless there is a way to call wp_nav_menu once in the header (to display top level) and once in the content area (to display sub menu). –  Jason Jun 30 '12 at 23:19
    
No worries. So because the sub nav is positioned absolute, it doesnt push the content down in the white area. Hmmm, you could either use some jquery or conditional php to add a class to the white area div. This class could add some extra top padding to clear the sub menu. –  Joshc Jul 1 '12 at 19:27
    
What I ended up doing was simply making two calls to the wp_nav_menu function. I do it once in the header and hide the sub menu using the sub-menu class. That's easy enough. I then do it in the page template. This was a bit tricky because as it turns out you can't hide the parent and show the child (or at least I was not able to accomplish this). So, I had to set the font size for the parent to zero. That ended up getting me what I needed. –  Jason Jul 1 '12 at 19:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.