How to Create Bottom Border Horizontal Navigation Hyperlinks Bar
Navigation
How To, for Web Applications
By: Chrysanthus Date Published: 14 Mar 2025
A hyperlinks bar where, when the mouse pointer goes over the link, the bottom border appears, is a Bottom Border Navigation Hyperlinks Bar. This tutorial explains how to create a Bottom Border Horizontal Navigation Hyperlinks Bar. A hyperlink is actually a rectangle (a rectangular plate). The text inside the hyperlink is inside the rectangle. It is not only clicking the text that causes an action; clicking anywhere within the rectangle causes an action. The HTML code for the hyperlink is the HTML anchor element (see below). For the example in this tutorial, there are three hyperlinks with the names: Home, News and Contact. Another objective for this project example is, that when a hyperlink is clicked, the bottom border that appeared should remain there, to show that the content for the hyperlink is active (display at the screen).
By default, the anchor elements are inline elements. This means that when coded next to one another, they appear in a horizontal line, next to one another, in the order coded. To have a vertical bar, the display property of each anchor element has to be made block. However, this tutorial (article) does not address the vertical hyperlinks bar.
At the end of this tutorial, the complete webpage code for this project (example) is given. The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the file in the browser. Take the mouse pointer over some of the hyperlinks. Click some of the hyperlinks. The reader is advice to do that before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Overlay Sidebar Navigation</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
There are HTML tags in the HTML head element. Any modern professional webpage should have the first four tags in this HTML head element. A lot of the style coding is in the HTML style element. There is a bit of coding within the JavaScript tags.
The HTML Body Element
The content of the HTML body element is:
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
</div>
<div style="padding-left:16px">
<h2>Bottom Border Links</h2>
<p>Hover over the links and click some.</p>
</div>
There are two div elements. The first one is for the navigation bar, and the second one is for the main webpage content. The body element will be given a margin of zero; that is why the left padding for the second div is given a dimension of 16px, in order to shift the starting of each line in the main webpage content by 16px (to the right). When the webpage is displayed, the second div occurs below the first div.
It must be stressed, that in this project (web page example), the appearance of the bottom border of a hyperlink indicates one of two possible things or both; that is: either the hyperlink has the mouse pointer over it or the hyperlink is the link for the active section (opened webpage), or both.
The class-name of the first div that has the anchor elements (hyperlinks) is "topnav". This class-name is used by CSS rules in the style element to access the first div and its content (the anchor elements).
When the website is loaded, the bottom border of the first hyperlink is shown. That is why it alone (among the hyperlinks), has the attribute, "class='active'" .
Each anchor element has an ID and the onclick event; see below for reasons.
The Style Element
The HTML style element basically consists of CSS rules.
The Body CSS Rule
The CSS rule for the HTML body is:
body {margin:0;}
The four margins are 0. With that the top of the navigation bar aligns with the top of the body (webpage) element, and the left of the bar aligns with the left of the body element (left edge of webpage).
CSS Rule for First div Element
The first div element with class-name "topnav", by default, extends from the left end of the body to the right end of the body element. Its content consists of anchor (a) elements that are by default, inline elements, and are in a horizontal line in the div. The rule for this div bar is:
div.topnav {
overflow: hidden;
background-color: #f1f1f1;
}
The property, "overflow: hidden;" means that if the number of inline HTML elements in the div are many, they should clip off, with the extra inline elements not shown, and not wrap to the next line in the div. The property, "background-color: #f1f1f1;" means that the background color of the div bar is #f1f1f1 (light gray).
CSS Rule Common to All Anchor Elements
In this simple project, all the anchor (hyperlink) elements present, are only found in the first div (horizontal bar). The CSS rule common to all the anchor elements is:
div.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
The anchor (a) elements are all floated left in the bar, in the order in which they are coded in the first div. The color of text is black. Each text is centered within its anchor element. The top and bottom padding is 14px, and the left and right padding is 16px. Padding is the gap between the text as content and the (corresponding) border. When the mouse pointer is over an anchor element, the text should not be underlined, so the value for text-decoration is "none". The font-size for the text characters is 17px.
Each of the four borders of the anchor element is "3px, solid and transparent". The transparency of the bottom border is overridden on-hover, or when active, by the red color; see below.
CSS Rules for Anchor On-hover and When-Active
The on-hover and when-active anchor element features, are the important features of this project. The rules are:
div.topnav a:hover {
border-bottom: 3px solid red;
}
div.topnav a.active {
border-bottom: 3px solid red;
}
By the first CSS rule here, when the mouse pointer goes over an anchor element, its bottom border, which is always there but transparent and with no color, becomes red (and opaque).
By the second CSS rule here, for any anchor element that is active, its bottom border, which is always there but transparent and with no color, becomes red (and opaque).
JavaScript
When the website is opened for the first time, the Home section is the current or active section, and this is indicated by the red bottom border of the Home anchor element; everything being equal. What happens to the bottom border of the other anchor elements, when they are clicked? When each is clicked, its section of the website (long webpage) comes up to fill the screen. The bottom border of the corresponding anchor element has to become red, producing an active presentation, while the rest of the anchor elements, including the previous active anchor element, have a bottom red border. (be at original state). The following JavaScript code in the HTML head element carries out the function:
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
Each anchor element has the onclick event, and sends its ID to the fn() function within the script tags in the HTML head element. The function performs two operations. The first operation is to put all the anchor elements in the "inactive" state, by giving to all their class-names, the value "" (no character). The next operation puts the anchor element that was clicked in the "active" state, by giving the value, "active" to the class-name of that element. The CSS rule ("div.topnav a.active") above gives the clicked anchor element, the active presentation. Remember, className in DOM JavaScript, is the equivalent of class value, among the attributes of any HTML element. Do not confuse between, giving an anchor element the active presentation, and actually bringing up the website (long page) section to fill the device screen: It is the responsibility of the href attribute of the anchor element to bring up the section to fill the screen, and it is the responsibility of the JavaScript code above to give the anchor element an active presentation.
Multi-page Websites
Many simple websites today are single long page websites, where what would have been separate web-pages, are now short sections in one long page, and each section would fill the screen (when called). The above JavaScript code works fine for such a single long page website, to give the hyperlink a special presentation. For a multi-page website, where for example, Home, News, and Contact are separate web-pages, use JavaScript similar to the following, to give the "active" icon, the active presentation:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.borderBottom = "3px solid red";
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. Webpage 3 must have id='3' in the corresponding anchor element in webpage 3, in order to display the anchor element in active presentation (active state).
The complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Bottom Border Navigation Hyperlinks Bar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {margin:0;}
div.topnav {
overflow: hidden;
background-color: #f1f1f1;
}
div.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
div.topnav a:hover {
border-bottom: 3px solid red;
}
div.topnav a.active {
border-bottom: 3px solid red;
}
</style>
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="#home" id="0" onclick="fn(id)">Home</a>
<a href="#news" id="1" onclick="fn(id)">News</a>
<a href="#contact" id="2" onclick="fn(id)">Contact</a>
</div>
<div style="padding-left:16px">
<h2>Bottom Border Links</h2>
<p>Hover over the links and click some.</p>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name having the extension, .html . Open the file in the browser. Take the mouse pointer over some of the hyperlinks. Click some of the hyperlinks.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK NEXT