[ SOLVED ] Active State Navigation

[andreasbj]

Hi.

I am wondering if anyone can help me with the making of navigation/menu with site active state.
By that I mean when a user clicks a link on the menu, the menu item will stay active for the page he's viewing.

I'm not good in CSS/PHP, but I'm trying, by taking hints from other templates and learning by that.

This is part of my style.css file:

Code:

.menu_nav {
    margin:0;
    padding:19px 0 0 20px;
    float:left;
    font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
.menu_nav ul {
    list-style:none;
}
.menu_nav ul li {
    margin:0;
    padding:0 2px 0 0;
    float:left;
    background:no-repeat right center;
}
.menu_nav ul li a {
    display:block;
    margin:0;
    padding:12px 13px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
    background:#f00 url(images/menu_a.gif) repeat-x center;
}

And this is part of template.php - only the menu:

Code:

<div class="menu_nav">
        <ul>
          <li><?php get_navigation(return_page_slug()); ?></a></li>

        </ul>
      </div>

As you see I haven't coded anything in template.php to activate the class, or whatever I should do - I'm stuck.

I hope someone could help me.
Thank you.

[n00dles101]

hi andreasbj,

Welcome to the forum.

The built in function to display menu "get_navigation(return_page_slug());" will automatically add a class "current" to the current page menu item.

Just change your CSS code to

Code:

.menu_nav ul li.current a, .menu_nav ul li a:hover {
    background:#f00 url(images/menu_a.gif) repeat-x center;
}

Mike

[andreasbj]

The CSS you ask me to change to, isn't that the CSS I already have?

Maby I just didnt understand?

[n00dles101]

your right !! 8)

I've changed it now.

[andreasbj]

Hehe, thank you.
Works perfectly!