Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[ SOLVED ] Active State Navigation
#1
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.
Reply
#2
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
My Github Repos: Github
Website: DigiMute
Reply
#3
The CSS you ask me to change to, isn't that the CSS I already have?

Maby I just didnt understand?
Reply
#4
your right !! 8)

I've changed it now.
My Github Repos: Github
Website: DigiMute
Reply
#5
Hehe, thank you.
Works perfectly!
Reply




Users browsing this thread: 2 Guest(s)