Topic: CSS class for active nav link

How about adding a css class for the 'active' navigation link?
Ie, when you're viewing the index:
<ul>
    <li id="navindex" class="active"><a href="index.php">Index</a></li>
    <li id="navuserlist"><a href="userlist.php">User list</a></li>
    <li id="navsearch"><a href="search.php">Search</a></li>
    <li id="navprofile"><a href="profile.php?id=2">Profile</a></li>
    <li id="navadmin"><a href="admin_index.php">Administration</a></li>
    <li id="navlogout"><a href="login.php?action=out&id=2">Logout</a></li>
</ul>

Would be nice to make the active link underlined or bold with a simple CSS style.

2

Re: CSS class for active nav link

You can already do that but it does require one style per link. The question as always is whether it is worth adding several lines of php to potentially save several lines of css. Personally, I'm in favour but that could be because my jobs writing the css not the php big_smile

Re: CSS class for active nav link

you can't make it so the open page is hightlighted though can you? the php would be more complicated though cos it needs some way of knowing what page it is on...

4

Re: CSS class for active nav link

Connorhd wrote:

you can't make it so the open page is hightlighted though can you?

You can because each page has its own id so you make descendant selectors

#punindex #navindex a:link, #punindex #navindex a:visited {highlight}
#punsearch #navsearch a:link, #punsearch #navsearch a:visited {highlight}

It works because the highlight style will only operate on, for example, the search link when the page has an id of punsearch.

In the case of index you would have to make a few extra styles because viewforum and viewtopic are really sub-pages of index eg. #punviewtopic #navindex etc.

Re: CSS class for active nav link

id="pun<pun_page>"

Indeed, didn't think of that. smile
Thanks.

Re: CSS class for active nav link

ahh clever wink