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.

I've been struggling with this for a while now and need some help. I'm trying to create a quite specific navigation setup for a client.

I have a top level navigation which is hard coded and not a problem. The second level of navigation should populate the left sidebar of the site, it should also show a third level of nestled/folding navigation within it. The fourth level of navigation is then shown separately in a column next to the left sidebar.

The illustration below or this image example should help explain:

------------------------------------------------------------------------
| topNav | topNav | topNav | topNav | topNav | topNav | topNav | topNav |
------------------------------------------------------------------------
| childNav01  v | greatgrandchild > | Content Goes Here                 |
|---------------|-------------------|                                   |
| grandchild    | greatgrandchild   |                                   |
|---------------|-------------------|                                   |
| grandchild    | greatgrandchild   |                                   |
|---------------|-------------------|                                   |
| grandchild  > | greatgrandchild   |                                   | 
|---------------|-------------------|                                   |
|               |                   |                                   |
| childNav02    |                   |                                   |
|---------------|                   |                                   |
| childNav03    |                   |                                   |
|---------------|                   |                                   |
| childNav04    |                   |                                   |
|---------------|                   |                                   |
|_______________|___________________|___________________________________|            

The issues I'm having is no solution I've come across can do all of these things.

In an ideal world I'd love to have one dynamic template rather than having lots but any help would be great.

share|improve this question
    
What is the behavior if a child is not yet selected, or would one always be? –  m0r7if3r Jan 20 '12 at 15:58
    
if a child isn't selected then the grandchild wouldn't be expanded, it would just be a list of children. If that makes sense. –  Simon Melhuish Jan 20 '12 at 16:26
    
Yup, perfect sense, gimmie a few minutes and I'll post a solution with example code :) –  m0r7if3r Jan 20 '12 at 16:34
add comment

1 Answer 1

up vote 0 down vote accepted

Took a decent amount of tinkering, but I came up with something workable based around absolute positioning, I did not apply any hover actions, those should be relatively easy for you to do (don't forget to z-index). Here's the CSS I would use:

#m {
    list-style: none;
}
#m > li {
    padding: 15px;
    float: left;
}
#m .sub-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 300px;
}
#m .sub-menu .sub-menu {
    position: static;
}
#m .sub-menu .sub-menu .sub-menu {
    position: absolute;
    width: 200px;
    top: 0;
    left: 300px;
}
#m .current-menu-ancestor > .sub-menu {
    display: block;
}
#m .current-menu-parent > .sub-menu {
    display: block;
}

#m is your menu holder, you can set that to whatever, the rest is default from wordpress, so you can't change that around too much without going to a custom walker or something...but why would you do that? Anyways, if you need help with the hover actions or anything, let me know.

share|improve this answer
    
Perfect, thanks for this! –  Simon Melhuish Feb 22 '12 at 12:44
add comment

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.