Simple Way of Adding a Current State/Page highlight to a Static Website using CSS

Here is a simple and effective way of adding a current state or page highlight to a static website navigational system so people know what page they are on:

CSS

In your CSS file you will add a declaration for each page followed by the highlight hex value color code you want to use:

#home #nav-home a,
#about #nav-about a,
#contact #nav-contact a {
color: #fdb827;
/* declarations to style the current state */
}

HTML

Every page of your static HTML site should include the <body> id that matches what you have in your CSS file. It will be unique for each of your different pages.  I’ve used red and blue to show what matches what:

<body id=”about”>  (you would change this for each page, “home”, “about”, “Contact”, etc.

In your navigation code, be sure to add the id tag as well that matches your CSS file.

<li id=”nav-home“><a href=”index.php”>Home</a></li>
<li id=”nav-about”><a href=”about.php”>About Us</a></li>
<li id=”nav-contact“><a href=”contact.php”>Contact</a></li>

To summarize, there are 3 parts to making this work – CSS, Body Tag and the buttons <li> code.  You can use an include statement on every page that calls your navigation so your site is easier to maintain.

—————————————-

 

Leave a Reply

Your email address will not be published. Required fields are marked *

image_description