GetSimple Support Forum
[ SOLVED ] Active State Navigation - Printable Version

+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: Scripts & Components (http://get-simple.info/forums/forumdisplay.php?fid=11)
+--- Thread: [ SOLVED ] Active State Navigation (/showthread.php?tid=1558)

[ SOLVED ] Active State Navigation - andreasbj - 2011-04-11

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.

[ SOLVED ] Active State Navigation - n00dles101 - 2011-04-11

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

[ SOLVED ] Active State Navigation - andreasbj - 2011-04-11

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

Maby I just didnt understand?

[ SOLVED ] Active State Navigation - n00dles101 - 2011-04-12

your right !! 8)

I've changed it now.

[ SOLVED ] Active State Navigation - andreasbj - 2011-04-12

Hehe, thank you.
Works perfectly!