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

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Instagram Hickstagram

  • 15 Feb 2019

    I didn’t manage to do a single episode of the Troika Podcast in 2018, but I’ve managed to record one now. Doing the whole process on my iPad Pro is wonderful! Episode 33 coming soon…

  • 14 Feb 2019

    That time of year when I keep marvelling at “Still light at 5!” On my way home…

  • 03 Feb 2019

    Black-headed Gulls huddled together on the ice at Rushy Common. #birding #digiscoping

  • 02 Feb 2019

    Found a bundle of things from my birth while at my Dads today. Leaflets on maternity benefits, welfare services and my weight card (Johnathan? Have I been spelling my one name wrong all these years?!)

  • 01 Feb 2019

  • 01 Feb 2019

  • 27 Jan 2019

    For her birthday last year, some of Leigh’s chums clubbed together bought her a gin blending weekend at the Plough in Clanfield. We booked it for January (when it would be needed most). It was like a potions class, and after a lot of smelling, she now has a gin that tastes like pencil shavings! It’s even nicer than it sounds!

  • 23 Jan 2019

    Pondering about pictograms - we’re going to need a new symbol soon. #icons #pictograms #symbols #representations

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

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