How to Highlight the Current Horizontal Navigation Hyperlink by Coding
Foreword: This article explains how to highlight the current horizontal navigation hyperlink by coding, so that when the web page is viewed by the user, the highlight will indicate to the user, the page he(she) is on.
By: Chrysanthus Date Published: 4 Nov 2024
Introduction
Imagine there are 15 related web-pages with the titles: Tutorial 1, Tutorial 2, Tutorial 3, . . .Tutorial 14, Tutorial 15 (fifteen web-pages in all). Each of these web pages has a horizontal navigation bar with all the 15 hyperlinks. The complete code uses some HTML, JavaScript and CSS.
If the page for "Tutorial 1" is displayed on the screen, its hyperlink in the horizontal navigation bar is highlighted, so that the user knows that he/she is viewing "Tutorial 1". If the page for "Tutorial 2" is displayed, its hyperlink is highlighted in the horizontal navigation bar, so that the user knows he/she is viewing "Tutorial 2". If the page for "Tutorial 3" is displayed, its hyperlink is highlighted in the horizontal navigation bar, for the same reason. This is true for the rest of the tutorial web-pages.
A hyperlink, or simply a link, has the code of an anchor (a) element. Remember that, though each anchor element is an inline element, its area is rectangular. Highlighting means that each anchor element takes a background color that is different from that of the background of the horizontal navigation bar, and that the foreground color (of the text) of the anchor element may be different from what it was before. In this tutorial, the foreground color, which is the color of the text of an anchor element, is made different from what it had before the highlight. When the highlight goes off (because a different page is displayed), the background color and the foreground color of the previous anchor element, go back to what they were before the highlight.
JavaScript for Highlighting the Link
Each anchor element is given an ID. The first anchor element is something like, <a id='1' href='replace with URL for Tutorial 1'>Tutorial 1</a>; the second anchor element is something like, <a id='2' href='replace with URL for Tutorial 2'>Tutorial 2</a>; the third anchor element is something like, <a id='3' href='replace with URL for Tutorial 3'>Tutorial 3</a>; the fourth anchor element is something like, <a id='4' href='replace with URL for Tutorial 4'>Tutorial 4</a>; and so on.
Each anchor element needs to have the following JavaScript, but with a different ID:
<script>
if (window.location.href == 'replace with URL for Tutorial 3') {
document.getElementById('3').style.backgroundColor = 'bisque';
document.getElementById('3').style.color = 'blue';
}
</script>
This is the JavaScript for the third anchor element. When the page with title, "Tutorial 3" is displayed, the background color of its link (anchor element) becomes bisque, different from the rest of the background color of the other links; and the color of text (foreground color) becomes blue, different from the rest of the text colors of the other links. The DOM expression, "window.location.href", returns the current URL, which is the URL of the webpage displayed. Read through the above code, if that is not done yet.
HTML Document
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
</head>
<body>
<nav style='width:100vw; display:block'>
<ul>
<li style='display:inline'><a id='1' href='replace with URL for Tutorial 1'>Tutorial 1</a></li>
<li style='display:inline'><a id='2' href='replace with URL for Tutorial 2'>Tutorial 2</a></li>
<li style='display:inline'><a id='3' href='replace with URL for Tutorial 3'>Tutorial 3</a></li>
<li style='display:inline'><a id='4' href='replace with URL for Tutorial 4'>Tutorial 4</a></li>
- - - -
<li style='display:inline'><a id='14' href='replace with URL for Tutorial 14'>Tutorial 14</a></li>
<li style='display:inline'><a id='15' href='replace with URL for Tutorial 15'>Tutorial 15</a></li>
</ul>
</nav>
<script>
if (window.location.href == 'replace with URL for Tutorial 3') {
document.getElementById('3').style.backgroundColor = 'bisque';
document.getElementById('3').style.color = 'blue';
}
</script>
<!-- JavaScript goes here -->
</body>
</html>
The above JavaScript is placed between the end tag of the nav element and the end tag of the body element, for this case.
An HTML ul element is a block level element. An HTML li element is a block level element. So, by default, the li elements will be displayed in a vertical column. In order to make the li elements to be in a row horizontally, each li element is given the style, 'display:inline' , to convert it from a block level element to an inline level element. To add more separation between the horizontal row li elements, use " " .
Summary
Each hyperlink should have the above JavaScript code. Each li element should have the style, 'display:inline' . For each code, the DOM expression, "window.location.href" returns the current URL, which is the URL of the page displayed. If the returned URL is the same as the coded URL for the particular link, then the link is highlighted. The rest of the other links are not highlighted. Highlighting here, means that the background color of the link is changed and the color of the text for the link, is also changed. When a different page is displayed, the link for this page is not highlighted.
Chrys