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

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

iPad Pro Pencil loop

11 Oct 2017

Troika #32: Tearjerker

04 Oct 2017

Instagram Hickstagram

  • 19 May 2018

  • 18 May 2018

    Loads of flowers on the clematis this year

  • 16 May 2018

    Scott Matthews performing at St John the Evangelist in Oxford. Sublime!

  • 16 May 2018

  • 14 May 2018

    The joy of local news

  • 13 May 2018

    Shillbrook woods (woodland trust)

  • 10 May 2018

    Lille Weekend Day 3 (last day 😥): Palais des Beaux-Arts #latergram #lille

  • 10 May 2018

    Lille Weekend Day 2: the rest, with Mimi the clown and a drink of ‘Sudden Death’ #latergram #lille

  • 10 May 2018

    Lille Weekend Day 2: Lille Cathedral #latergram #lille

  • 10 May 2018

    Lille Weekend Day 1 🤗 #latergram #lille

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