pages - Advanced Multi Tier Navigation across columns

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 should help explain:

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.

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 should help explain:

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.

• pages
• navigation
• hierarchical

Share Improve this question edited Aug 25, 2019 at 20:44 Glorfindel 60933 gold badges1010 silver badges1818 bronze badges asked Jan 20, 2012 at 15:32 Simon MelhuishSimon Melhuish 311 bronze badge 3

• What is the behavior if a child is not yet selected, or would one always be? – mor7ifer Commented Jan 20, 2012 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 Commented Jan 20, 2012 at 16:26
• Yup, perfect sense, gimmie a few minutes and I'll post a solution with example code :) – mor7ifer Commented Jan 20, 2012 at 16:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.