Horizontal Menu Cuurent Page Style

David

New Member
I have a horizontal navigation menu and I'd like to have the tab that coincides with the current page to be the same as the .nav li a:hover style.

PHP:
.nav li {float: left}

.nav li a, .nav li a:visited {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 700;
color: #fff;
font-size: 1.5em;
background:#6b8cc1;
text-align: center;
margin-right:5px;
}

.nav li a:hover {
color: #151515;
background-color: #ffcc33;
text-decoration: underline;
}
I've tried this but it doesn't work:
PHP:
.nav li current {
color: #151515;
background-color: #ffcc33;
text-decoration: underline;
}

<ul class='nav'>
<li class='current'><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact/a></li>
</ul>
I'm using HTML5. Any help would be appreciated.

Thanks
David
 

chrishirst

Well-Known Member
Staff member
Do you mean you want to highlight the current URL in the navigation?

If so you need to either:

Set the style for the navigation item server side or use javascript to change the style for the appropriate item.
 

David

New Member
Yes, like in my attachment picture. I'll test to see which is the active page and will manually set the class tag for that tab.

For instance:
PHP:
<ul>";
if($page == 'Home'){
echo "
<li class='current'><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact/a></li> 
";
}
elseif ($page == 'About'){
echo "
<li><a href="#">Home</a></li>
<li class='current'><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact/a></li> 
";
}
etc., etc.
echo "
</ul>
Unfortunately the style I wrote to do this isn't working:
PHP:
.nav li current {
color: #151515;
background-color: #ffcc33;
text-decoration: underline;
}
I don't know if it's something I'm doing wrong or if it can't be done using HTML5 or CSS3. But if what I'm wanting to do isn't possible with HTML5 or CSS3 without the aid of javascript then it would seem we are digressing in web design rather than progressing. I hope the problem is with me as that can be rectified.
 

Attachments

  • menu.jpg
    menu.jpg
    8.3 KB · Views: 25

David

New Member
I got it. The problem was with me.
PHP:
.nav li.current a {
color: #151515;
background-color: #ffcc33;
text-decoration: underline;
}
Instead of:
PHP:
.nav li current {
color: #151515;
background-color: #ffcc33;
text-decoration: underline;
}
Thanks for helping.
 

notarypublic

New Member
Alternatively, you could set an id on <body> so that you can make other changes to a page's css, as needed (useful for when you have multiple templates' worth of CSS in one stylesheet)

Code:
<body id='about'> // <--- set this with PHP

...
<li class='home' ><a href="#">Home</a></li>
<li class='about' ><a href="#">About</a></li>
...


CSS:

#about .about a, #home .home a, #resources .resources a ... {
//CSS here
} 

//but then you can also add different template parts:
#home #mainContent {
width: 590px;
}
#about #mainContent {
width: 720px;
}
 
Top