Broad Network


How to Highlight the Current Navigation Hyperlink by Coding

Foreword: This article explains how to highlight the current 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 is on.

By: Chrysanthus Date Published: 16 Oct 2024

Introduction

This article explains how to highlight the current 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. The vertical navigation sidebar is used for illustration.

Imagine there are 20 webpage related tutorials with the titles: Tutorial 1, Tutorial 2, Tutorial 3, . . .Tutorial 19, Tutorial 20 (twenty web-pages in all). Each of these web pages has a vertical navigation sidebar with all the 20 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 vertical navigation sidebar 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 vertical navigation sidebar, so that the user knows that he/she is viewing "Tutorial 2". If the page for "Tutorial 3" is displayed, its hyperlink is highlighted in the vertical navigation sidebar, 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 vertical navigation sidebar, 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 code, if that is not done yet.

HTML Document
The HTML code for the vertical navigation sidebar would be something like:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <nav style='width:10vw; height:100vh; overflow:scroll; display:inline-block'>
        <ul>
            <li><a id='1' href='replace with URL for Tutorial 1'>Tutorial 1</a></li>
            <li><a id='2' href='replace with URL for Tutorial 2'>Tutorial 2</a></li>
            <li><a id='3' href='replace with URL for Tutorial 3'>Tutorial 3</a></li>
            <li><a id='4' href='replace with URL for Tutorial 4'>Tutorial 4</a></li>
                    |
                    |
                    |
                    |
            <li><a id='19' href='replace with URL for Tutorial 19'>Tutorial 19</a></li>
            <li><a id='20' href='replace with URL for Tutorial 20'>Tutorial 20</a></li>
        </ul>
    </nav>
<!-- 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.

Notice the expressions, "height:100vh; overflow:scroll;" in the style attribute. If the number of links goes below the depth (height) of the view-port, then a scroll bar will appear, for the links (navigation sidebar).

Summary
Each hyperlink should have the above JavaScript code. 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

Related Links

More Related Links

Cousins

Comments