Help - Search - Members - Calendar
Full Version: current page style...?
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
Maccabee
I have seen on some sites, when you click on a nav link when you go the page, that link stays, highlighted or something signifying that you are still on that page. How do you do that? I thought you just used "a:active"? But im trying it out and it isnt working.
Mickey
Try a:visited instead of a:active. Those are for pages you've already visited, obviously.
Maccabee
No mean like I have seen pages that the nav links are tabs and whichever page you are on the tab is raised. So you clock the contact link and then it knows you are on the contact page and gives a style to that link.
schizo
They probably have a slightly different stylesheet on each page that has a an image of that page's link looking "raised."
Mikeplyts
You could also just try making a custom class/id for the link that will mark what current page it is and then you can just apply that class/id to that certain link in the navigation according to what page it marks. shrug.gif
Mickey
First, put up the same navigation codes on all your pages. Then, create a class that styles the look of a link and makes it look selected. Finally, use that class on the link of whichever page you're on.
Mikeplyts
^basically what I just said. mellow.gif
Mickey
LOL, yeah. I was in the middle of typing when I guess you and Gabi already posted.
Mikeplyts
Oh, haha.
synapse
if you are using a list for links, try #(ID) a:active in your html/xhtml markup.

example:
CODE
<ul id="navigation">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

CODE
#navigation { color:#ff0000; }
#navigation a:active{ color:#ff00ff; }
Maccabee
Is that how cb does it? I was just hoping there was a way to do it in css, cause when I make sites everything is exactly the same on every page, since I use the includes. I guess I need to stop doing that.
Like this:
<?php include("includes/header.php"); ?>
Homepage
<?php include("includes/footer.php"); ?>

fixtatik
You could use if statements and use CSS to style the "current" class:
CODE
<ul>
  <li><a<?php if($page == 'link-1') echo ' class="current"'; ?> href="#">Link 1</a></li>
  <li><a<?php if($page == 'link-2') echo ' class="current"'; ?> href="#">Link 2</a></li>
  <li><a<?php if($page == 'link-3') echo ' class="current"'; ?> href="#">Link 3</a></li>
</ul>

Of course, you'll just need to define what the variable $page is. If you have links like yoursite.com/link-1.php, you can get the file name and use that:
CODE
<?php
$page = $_SERVER['SCRIPT_FILENAME'];
$page = explode('.php', $page);
$page = $page[0];
?>

In this case, going to yoursite.com/link-1.php, $page is link-1.
theerinkal
I got told about this website. I think it's pretty nice. You have to click page source to get some of the codes but other than that, I use it.

That is ALL CSS, no javascript or anything comes with those.
HeartOfPandora
You can do it with a teeny bit of PHP and some CSS styling, but I don't know the snippet and I can't remember how to find it... :x
mipadi
In most cases, it's probably just a simple bit of server-side logic, like so:

CODE
<a href="link.html"{% if currentpage %} class="currentpage"{% endif %}</a>


And then you just style a.currentpage using CSS.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.