current page style...? Options

[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.

[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.

[Mikeplyts]

^basically what I just said.

[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.