Jump to content


Photo

Highlight Current Page Plus!


  • Please log in to reply
2 replies to this topic

#1 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 26 December 2008 - 05:44 PM

This original article can also be found here on my website. Below I've compiled the three easiest ways to highlight the current page that your on. All three are coded clean and very simple to implement into your own project. The method that you choose to use simply comes down to the project at hand and your preferred coding style. Each are pretty self explanatory, so I'll just let the code explain itself. That's usually the way I learn best anyway!


OPTION #1

Here is a working example.

This one is the easiest and most basic of the three options listed. If you have a small site (1 to 5 pages) and your running .html extensions, and/or you don't want or need to use PHP Includes, then this method is the one for you!

#nav {
width:150px;
list-style:none;
margin:150px auto;
}
#nav a {
color:black;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:red;
}
a#current {
color:red;
}
a#current:active, a#current:focus, a#current:hover {
color:blue;
}





OPTION #2

Here is a working example.

If you use, or want to use PHP Includes on your website, then the simple code shone above will not suffice. Therefore, you'll need to get a little more creative and use this method (Option #2) or the next method (Option #3) instead. This method shone here, is usually my code of choice for the job at hand!

#nav {
width:150px;
list-style:none;
margin:150px auto;
}
#nav a {
color:black;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:red;
}
#home a#homenav, #about a#aboutnav, #contact a#contactnav {
color:red;
}
#home a#homenav:hover, #about a#aboutnav:hover, #contact a#contactnav:hover {
color:blue; /* add :active and :focus styles here also */
}





OPTION #3

Here is a working example.

And the final way of going about highlighting the current page's navigation link is to use a bit of PHP. A little explanation: This bit here in bold (which tells the PHP code which page your currently on) can be placed just about anywhere on the page, that is, as long as it's sitting above the #nav using it. In this case, and partly for simplicity purposes, I just placed it inside the body tag as you can see. However, and unless proven otherwise, I think I like it there! And I'd like to thank Ben Falk and John Beatrice for helping me to get this last one working.

#nav {
width:150px;
list-style:none;
margin:150px auto;
}
#nav a {
color:black;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:red;
}
a#current {
color:red;
}
a#current:active, a#current:focus, a#current:hover {
color:blue;
}

>



Edited by Eric, 26 December 2008 - 05:48 PM.

  • 0

#2 LSW

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,017 posts
  • LocationJuneau AK

Posted 13 January 2009 - 12:02 PM

:cool:
  • 0

 

Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke
 

"Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works.
 Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
 Anything invented after you're thirty-five is against the natural order of things."
 
                                                                                                                                                    - Douglas Adams from - The Salmon of Doubt (2002)


 


#3 daddyalfie

daddyalfie

    Advanced Member

  • Member
  • PipPipPipPip
  • 238 posts
  • LocationNorth Carolina

Posted 02 May 2009 - 08:06 PM

WOW!

Need to study on that some!

Many thanks!

Alfie

PS So glad LSW approves!

Edited by daddyalfie, 02 May 2009 - 08:12 PM.

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users