Highlighting current page with CSS

25 Nov 2003

With handy online resources such as List-o-Matic, its now easier than ever to use unordered lists to create navigation. As an extra help to users, why not highlight the current page in the navigation? A recent article on A List Apart called Keeping Navigation current, showed how to do this with PHP. Here’s an easy solution using CSS.

First we’ll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway:


<ul id="navlist">
	<li><a href="index.html" >Home</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="faq.html">FAQ</a></li>
	<li><a href="contact.html">contact us</a></li>
</ul>

Next we need to add a unique class or id (doesn’t really matter which) to each of the section pages:


<ul id="navlist">
	<li><a href="index.html" id="homenav">Home</a></li>
	<li><a href="products.html" id="prodnav">Products</a></li>
	<li><a href="faq.html" id="faqnav">FAQ</a></li>
	<li><a href="contact.html" id="connav">contact us</a></li>
</ul>

Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag:

<body id="home">

This allows us to specify the highlighted tab. After we’ve added the CSS styling for the menu, we add the css rules to highlight the correct tab. As all of these instances use the same rules, we can just list them all, seperated by commas, and the browser will apply the rules to every instance. These overrule the previous styles wherever <body id=“home”> is on the same page as <a id=“homenav”>.


body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
	color: #fff;
	background: #930;
}

I’ve set up some basic pages so that you can see the navigation in action. This allows the navigation to be put into an external include file for ease of updating. The ‘decisions’ as to which button or tab to highlight all happens in the CSS file. This can also be used to introduce different coloured sections. Handy if the layout positioning stays similar and all you want to do is change the colour theme.

Recent Posts

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

Instagram Hickstagram

  • 14 Jul 2018

    Stopping for a breather - hot day for hills

  • 13 Jul 2018

  • 09 Jul 2018

    Recent garden addition: Stargazer Lillies

  • 07 Jul 2018

    Well… we missed quite a few key acts, but have made it here before Interpol starts at least!

  • 07 Jul 2018

    On our way to BST in Hyde Park. Or… not 😞

  • 06 Jul 2018

    My favourites from this years On Form Sculpture exhibition. The whale was my absolute favourite, but was already sold (which is fine as I don’t have a spare £11,000)

  • 01 Jul 2018

  • 01 Jul 2018

    Not quite in height order. Sort it out

  • 01 Jul 2018

    Filth.

  • 30 Jun 2018

    Agapanthus about to burst forth

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom