Grow your CSS skills. Land your dream job.

Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)

Published by Chris Coyier

You've seen this a million times:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

The classic menu HTML which you can transform into any number of beautiful things through CSS. You could include that in all your pages by putting it into it's own HTML file (like "menu.html") and including it on your pages with some kind of simple include statement like this PHP snippet:

<?php include_once("menu.html"); ?>

Now you need to add a class so you can indicate to your visitors where they are in your current navigation:

<ul>
  <li><a class="selected" href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

The selected class might switch out a background image or bold the text or something to indicate current navigation. This is great, except that now you have individualized this block of code for a particular page. Uh oh! We broke the entire usefulness of using the include statement. Doing it this way would require us to put this code on every single page and change around where we put the selected class.

Instead, let's give every single link the menu it's own unique class:

<ul>
  <li><a class="home"  href="#">Home</a></li>
  <li><a class="about" href="#">About us</a></li>
  <li><a class="contact" href="#">Contact us</a></li>
</ul>

This still doesn't give us a way to single out individual menu items on individual pages. At least not all by itself....

Here comes the trickery:

Give each <body> tag on your pages a unique ID. Such as <body id="home"> Then you can create CSS which will only affect the menu items when the menu link class and the body ID match:

#home .home, #about .about, #about .about, #contact .contact
{
Your CSS stylings here
}

What a great example of the beauty and efficiency CSS. Thanks Trenton Moss.

Comments

  1. Permalink to comment#

    I couldn’t understand some parts of this article ding Navigation Code On All Pages (Even With Current Navigation Highlighting!), but I guess I just need to check some more resources regarding this, because it sounds interesting.

  2. Hi Daniel,

    The main point of the article is that you can use unique ID’s for the body element in your different pages, and then only activate certain CSS on that page based on matching ID’s and Classes. Basically it helps fight redundancy because you can then use an include statement to include the navigation instead of repeating it on every page.

    Trenton might explain it better in his article, which is linked to on the bottom of the page (it’s #10).

    If you have further questions, don’t hesitate to contact us.

  3. Permalink to comment#

    typo
    class = “home”
    should be
    id = “home”

  4. Permalink to comment#

    Great tip. I’ve always use PHP and declared a variable at the top to set the active state but this is much simpler and more efficient. I’ll definitely use this one.

  5. WIlliam
    Permalink to comment#

    Very helpful.

    Thank you

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".