CSS Tutorial – Highlight Navigation Links to Indicate Current Page

Today’s Web Design Agenda is to have our Page Navigation Links indicate our current page using only CSS and Classes.

How to Highlight Current Page using CSS

DIFFICULTY: EASY

Today’s short block of instruction will be how to use CSS to highlight the Current page of your website’s navigation menu. Realizing that there are other methods of enabling the exact same feature using JavaScript and PHP and we may discuss these methods in a later blog. Please keep in mind that I am a novice in CSS and my methods may or may not be the easiest or shortest path to reach the desired results.

STEP 1 – Add CSS & Classes to our External Stylesheet

We need to create CSS Classes for the paragraph and links in our External CSS file. In this example, I corresponded each class name with the page number in which it will be used. The result will make our active page link color WHITE with a GREEN Background.  Save and Close our CSS Stylesheet.

p.page1 a.page1nav,
p.page2 a.page2nav,
p.page3 a.page3nav,
p.page4 a.page4nav,
p.page5 a.page5nav,
p.page6 a.page6nav,
p.page7 a.page7nav,
p.page8 a.page8nav,
p.page9 a.page9nav,
p.page10 a.page10nav,
p.page11 a.page11nav
{
color: #fff;
background: #008000;
}

Now we open our HTML Document.  Here are what our links looked like before adding Classes:

<p class=”page4″>
<strong>Page:
<a class=”page1nav” href=”animals-insects-01.php”>&nbsp;1&nbsp;</a>&nbsp;|&nbsp;
<a class=”page2nav” href=”animals-insects-02.php”>&nbsp;2&nbsp;</a>&nbsp;|&nbsp;
<a class=”page3nav” href=”animals-insects-03.php”>&nbsp;3&nbsp;</a>&nbsp;|&nbsp;
<a class=”page4nav” href=”animals-insects-04.php”>&nbsp;4&nbsp;</a>&nbsp;|&nbsp;
<a class=”page5nav” href=”animals-insects-05.php”>&nbsp;5&nbsp;</a>&nbsp;|&nbsp;
</strong>
<a href=”http://www.wallydfantasyfootball.com/helmet-logo.php”> &nbsp;Home&nbsp; </a>
</p>

STEP 2 – Add Classes to HTML Code

And Now we add the Classes to our HTML that match the classes we added to our External CSS:

<p class=”page4″>
<strong>Page:
<a class=”page1nav” href=”animals-insects-01.php”>&nbsp;1&nbsp;</a>&nbsp;|&nbsp;
<a class=”page2nav” href=”animals-insects-02.php”>&nbsp;2&nbsp;</a>&nbsp;|&nbsp;
<a class=”page3nav” href=”animals-insects-03.php”>&nbsp;3&nbsp;</a>&nbsp;|&nbsp;
<a class=”page4nav” href=”animals-insects-04.php”>&nbsp;4&nbsp;</a>&nbsp;|&nbsp;
<a class=”page5nav” href=”animals-insects-05.php”>&nbsp;5&nbsp;</a>&nbsp;|&nbsp;
</strong>
<a href=”http://www.wallydfantasyfootball.com/helmet-logo.php”> &nbsp;Home&nbsp; </a>
</p>

For an example of this code in action… Visit my Fantasy Football Website: Wally D. Fantasy Football.

Feel free to contact me with any questions.

Tagged , , , , , . Bookmark the permalink.

Leave a Reply