Multi level nav problem, need input.

Friday 04 November 2005 11:56:39 pm

Hi all, I'm making a multilevel navigation bar and I have run into a small problem, maybe someone here can help?

I'm using unordered lists for my menu with one level of nested ul's, my stylesheet highlights the nested list and the current links. The problem I have is that if you navigate to a link (node) that has children the nested ul is then displayed benieth, but if you navigate to one of those children you end up with two links showing as current.

From a system point of view this is true but from an interface point of view it gets a little confusing for the user.

I'm using the code below to highlight current links and it works fine on the top level but once a child is selected the problem comes into play.

{$s_menu.is_selected|choose('',' class="current"',' class="current-parent"')}

What I need to do is find out what level I'm on and apply the correct class to the link. So if the node is not current there is no class, if the link is current the it has a class="current" appended and if the link is a parent and one of it's children is selected it is appended class="current-parent" while the child is appended class="current".

Wow I hope that makes sense?

Maybe some output will make it clearer?

This is my menu at the top level:-

link1 (below) has no children so its just current or not current.

<ul>
    <li class="current">link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
</ul>

Ok link2 (below) has children but they are not selected so link2 is the current link.

<ul>
    <li>link1</li>
    <li class="current">link2</li>
    <li>
        <ul>
            <li>child link1</li>
            <li>child link1</li>
        </ul>
    </li>
    <li>link3</li>
    <li>link4</li>
</ul>

As it stands now this is what happens when I select child link1 (below) (or any child link).

<ul>
    <li>link1</li>
    <li class="current">link2</li>
    <li>
        <ul>
            <li class="current">child link1</li>
            <li>child link1</li>
        </ul>
    </li>
    <li>link3</li>
    <li>link4</li>
</ul>

What I really need is this (below)

<ul>
    <li>link1</li>
    <li class="current-parent">link2</li>
    <li>
        <ul>
            <li class="current">child link1</li>
            <li>child link1</li>
        </ul>
    </li>
    <li>link3</li>
    <li>link4</li>
</ul>

When a child link is selected the parent has a unique class (current-parent) this way my parent link can now be styled with the same background colour as the ul beneath it.

Wow did that make sense? This is really hard to explain, but if this was straight HTLM coding it would be so simple. Ok so after all that, is there any way I could manipulate this line

{$s_menu.is_selected|choose('',' class="current"',' class="current-parent"')}

to do what I have explained?

I know the is_selected operator probably won't work, I thought I may need to use some if else type statements, I just dont know how to do it though?

Any help is soooo appreciated, if you are unsure of my question I'll do my best to explain better.

Cheers!

Pardon me while I burst into flames...