How to Create a Horizontal Scrollable Hyperlink Menu with CSS
Distributed Hyperlinks within a Horizontal Bar
How To, for Web Applications
By: Chrysanthus Date Published: 29 Mar 2025
This tutorial explains How to Create a Horizontal Scrollable Hyperlink Menu with CSS. A Horizontal Scrollable Hyperlink Menu is a menu that will have a scroll-bar when the width of the device is small. For the user to access the hyperlinks on the right, he or she will have to use the scroll-bar.
The complete webpage code is given at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the files in a browser. Click a few hyperlinks. Keep reducing the width of the browser, observing how the horizontal bar is reducing in length, until its smallest width is reached, that would fit into the width of a smartphone. While the webpage width is reducing, if the scroll-bar was not present, it would become present. The reader is advised to do that before continuing to read the rest of this tutorial.
The webpage Skeleton Code
The web page skeleton code, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrollable Hyperlink Menu</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>
Any modern responsible webpage should have at least the first four tags in the HTML head element. The HTML style element will have a lot of code (CSS rules). The script element will have a small JavaScript code for indicating the active hyperlink; see below. The body element will have the div for the bar with the hyperlinks.
The HTML body Element
The content of the HTML body element is:
<div class="scrollmenu">
<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>
<a href="#about" id='3' onclick="fn(id)">About</a>
<a href="#support" id='4' onclick="fn(id)">Support</a>
<a href="#blog" id='5' onclick="fn(id)">Blog</a>
<a href="#tools" id='6' onclick="fn(id)">Tools</a>
<a href="#base" id='7' onclick="fn(id)">Base</a>
<a href="#custom" id='8' onclick="fn(id)">Custom</a>
<a href="#more" id='9' onclick="fn(id)">More</a>
<a href="#logo" id='10' onclick="fn(id)">Logo</a>
<a href="#friends" id='11' onclick="fn(id)">Friends</a>
<a href="#partners" id='12' onclick="fn(id)">Partners</a>
<a href="#people" id='13' onclick="fn(id)">People</a>
<a href="#work" id='14' onclick="fn(id)">Work</a>
</div>
<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>
There is only one div element. The web developer can add another div element below the paragraph element for the main document content. The present div element is the horizontal bar with the many hyperlinks. The class-name for this div bar is "scrollmenu", which will be used in a CSS rule selector to style the div bar. There are many anchor elements in the bar. Remember that an anchor element is a hyperlink.
When the website loads, the very first anchor element is made active; see below, for more information.
There are many hyperlinks (anchor elements) in the horizontal div bar. Anchor elements are by default inline elements. This means that, when typed next to one another, they will appear in a horizontal line at a browser.
The Style Element
All the presentation code for this example (tutorial) is within the start and end tags of the HTML style element.
Styling the div Bar
The CSS rule for the div bar is:
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
The selector is "div.scrollmenu", meaning that the div bar is accessed with the class-name of the div bar in the HTML body element. The background color is #333 (black, but not the blackest black). When the screen width is small, in order to have the scroll-bar, the property "overflow: auto;" is employed, so that the scroll-bar should appear only when necessary. There is also the property (and value), "white-space: nowrap;". If this property and its particular value is absent, then for small screen widths, the hyperlinks will wrap to the next lines below, despite the presence of "overflow: auto;".
Styling Each Anchor Element
The style for each anchor element is:
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
The selector is, "div.scrollmenu a". Each anchor element, represented by 'a', in the selector, is accessed through the class-name of the div bar. Each anchor (hyperlink) element has the property "display: inline-block;". In the absence of the value of "inline-block;" , for the display property, the top and bottom padding for each of the hyperlink, will not appear at the browser.
The color of text for each of the anchor elements is white. The text for each anchor element is centered horizontally within the rectangle for the anchor element. The padding all round each anchor element is 14px. No anchor element should be underlined; hence "text-decoration: none;" .
Each of the Anchor Elements On-Hover
The CSS rule for this is:
div.scrollmenu a:hover {
background-color: #777;
}
The class-name of the div bar is used to access all the anchor elements. On mouse over, the background color becomes #777 (light gray) and the color of text remains what is was, white.
CSS Rule for Active Anchor Element
When a hyperlink is clicked, its section or page comes up to fill the screen. The clicked anchor element is said to be active. The CSS rule for an active hyperlink (anchor element) is:
div.scrollmenu a.active {
background-color: #04AA6D;
}
Note that all the anchor elements are accessed for this, through the class-name of the div bar. When active, the background color becomes #04AA6D (greenish) and the color of text remains white.
JavaScript
When a hyperlink element (anchor element) is clicked, its background and text color should change to show that its section or page now fills the screen. The hyperlink is then said to be active. To achieve this, let each 'a' (anchor) element have an onclick event as follows:
<div class="scrollmenu">
<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>
<a href="#about" id='3' onclick="fn(id)">About</a>
<a href="#support" id='4' onclick="fn(id)">Support</a>
<a href="#blog" id='5' onclick="fn(id)">Blog</a>
<a href="#tools" id='6' onclick="fn(id)">Tools</a>
<a href="#base" id='7' onclick="fn(id)">Base</a>
<a href="#custom" id='8' onclick="fn(id)">Custom</a>
<a href="#more" id='9' onclick="fn(id)">More</a>
<a href="#logo" id='10' onclick="fn(id)">Logo</a>
<a href="#friends" id='11' onclick="fn(id)">Friends</a>
<a href="#partners" id='12' onclick="fn(id)">Partners</a>
<a href="#people" id='13' onclick="fn(id)">People</a>
<a href="#work" id='14' onclick="fn(id)">Work</a>
</div>
In the HTML head element, add the following JavaScript:
<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>
Read through the above code, if you have not already done so. Firstly, through the class attribute (class-name) for each anchor element, each anchor element is given the class-name "", which means nothing. Then the hyperlink clicked is given the class-name, "active" . The active CSS rule in the Style element becomes applicable to the clicked hyperlink.
Multi-page Websites
Many simple websites today are single page websites, where what would have been separate web-pages, are now sections in one long page; and each section would fill the screen. The above JavaScript code works fine for such a single page website, to give the hyperlink a special background. For a multi-page website, where for example, Home, News, Contact, About, etc. are separate web-pages, use JavaScript similar to the following:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = #04AA6D;
document.getElementById('3').style.color = 'white';
}
</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. The anchor element (hyperlink) which has to be clicked, in order to go to webpage 3, from a different webpage, should have id='3'. Webpage 3 must have the same hyperlink (anchor element), and it too must have id='3' .
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrollable Hyperlink Menu</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>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
div.scrollmenu a.active {
background-color: #04AA6D;
}
</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="scrollmenu">
<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>
<a href="#about" id='3' onclick="fn(id)">About</a>
<a href="#support" id='4' onclick="fn(id)">Support</a>
<a href="#blog" id='5' onclick="fn(id)">Blog</a>
<a href="#tools" id='6' onclick="fn(id)">Tools</a>
<a href="#base" id='7' onclick="fn(id)">Base</a>
<a href="#custom" id='8' onclick="fn(id)">Custom</a>
<a href="#more" id='9' onclick="fn(id)">More</a>
<a href="#logo" id='10' onclick="fn(id)">Logo</a>
<a href="#friends" id='11' onclick="fn(id)">Friends</a>
<a href="#partners" id='12' onclick="fn(id)">Partners</a>
<a href="#people" id='13' onclick="fn(id)">People</a>
<a href="#work" id='14' onclick="fn(id)">Work</a>
</div>
<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the files in a browser. Click a few hyperlinks. Keep reducing the width of the browser, observing how the horizontal bar is reducing in length, until its smallest width is reached, that would fit into the width of a smartphone. While the webpage width is reducing, if the scroll-bar was not present, it would become present.
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