How to Create a Horizontal Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
Mobile Navigation Menu
How To, for Web Applications
By: Chrysanthus Date Published: 1 Apr 2025
This tutorial explains How to Create a Horizontal Navigation Menu for Smartphones and Tablets, Using CSS and JavaScript. Imagine a top horizontal bar in a smartphone. There is the menu icon at the right of the bar, and the logo at the left of the bar. When the icon is clicked, the rest of the hyperlinks appear on the right of the logo, without crossing the menu icon. When the menu icon is clicked again, the hyperlinks that appeared, disappeared.
Do not confuse between a menu and a menu icon. A menu is a list of items. The list may be vertical or horizontal. For this tutorial, the list is horizontal, and would show on the right of the logo or would hide off from the right of the logo. The menu icon is a small button having three horizontal bars. When the menu icon is clicked, a menu should appear, either vertically or horizontally; horizontally for this project.
The word, "navigation" in this tutorial, means that the horizontal bar has hyperlinks.
The complete code for this project is given at the bottom of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in a browser. Click the menu icon once, to see the horizontal menu appear; and then after one second, click the menu icon again. The horizontal menu that appeared, should disappear. The reader is advised to do this, 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 Mobile Navigation 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 professional webpage has at least the first four tags in the HTML head element. The HTML style element will have a lot of code (CSS rules). The HTML script element will have a short JavaScript for toggling the appearance of the extra horizontal menu (on-and-off).
The HTML body element will have an outer div that will be the size of a smartphone. There will be two inner parallel divs inside this outer div. The first inner div will be for the top horizontal bar, with the logo on the left and the menu icon on the right. The second inner div will be for the main document content.
The reader should not forget that the div is also an HTML element. A webpage consists of HTML elements, styles and JavaScript.
The HTML Body Element Content
The content for the HTML body element for this project is:
<!-- Simulate a smartphone / tablet look -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h3>Horizontal Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
<p><strong>Note that this example shouldt'n be used if you have a lot of links, as they will "break" the navbar when there's too many (especially on very small screens).</strong></p>
</div>
<!-- End smartphone / tablet look -->
</div>
The outer div that will be the size of a smartphone, has the class-name, "mobile-container". The first inner div is for the top horizontal bar. It has the class-name, "topnav".
Note that the anchor element is the code for the hyperlink. Inside the first inner div, is an anchor element whose content is the logo. Though by its logo first position, it should appear on the extreme left, it will be floated to the left, inside the div.topnav. The class-name for this anchor element is "active". It will be styled in a special way, to indicate that the main content displayed in the second inner div, is its content. This is followed by an innermost nested div, which is the extra horizontal menu to appear and disappear. Its ID is "myLinks". This innermost div has the extra navigation hyperlinks. After this innermost div in the first inner div, is an anchor element, whose content is the menu icon (☰). The class-name for this anchor element is "icon". It will be floated to the right, in the top horizontal bar.
The second inner div is for the main document content. It is given a left padding of "padding-left:16px". That is, it is squeezed towards the right, by a gap of "padding-left:16px", from the left end of the outer div.
Styling the Webpage Important HTML Elements
With the exception of the second inner div, the styles for the important elements in the webpage are given by CSS rules in the HTML style element, in the HTML head element.
Styling the Body Element
The CSS rule for the HTML body is:
body {
font-family: Arial, Helvetica, sans-serif;
}
If the browser does not have the font, Arial, then it should have the font, Helvetica, If the browser does not really have the font, Helvetica, then any sans-serif font that it has, should be used. The font chosen is used for any text within any element in the body element.
Styling the Outermost div
The CSS rule is:
div.mobile-container {
max-width: 480px;
height: 500px;
margin: auto;
background-color: #555;
color: white;
border-radius: 10px;
}
The HTML body element will have an outer div, that will be the size of a smartphone. So this div has to be styled: it has to be given at least a width and height. It is actually given a maximum width of 480px and a fixed height 500px. The value for the margin property is auto, meaning that the browser should choose the margin for this outermost div. The background color is #555 (grayish). Any color of text within this outer div, is white. The outer div is rounded at the corners, with a radius of 10px.
Styling the Top Horizontal Bar
The CSS rule for the top horizontal bar is:
div.topnav {
overflow: hidden;
background-color: #333;
}
The logo anchor element will be floated to the left of the top horizontal div (div.topnav). The icon anchor element will be floated to the right of the same div. Each of these anchor elements will be heavily styled. Under this condition, the top horizontal div needs the "overflow: hidden;" CSS property.
Remember that the top horizontal bar has the logo at its extreme left and the menu icon at its extreme right. In the code, this top horizontal bar is a div element. Its first content element is the logo anchor element. Its next content element is a div element with the navigation anchor elements (three of them for this project). This div has the ID, "myLinks". Its last content element is the anchor element for the menu icon. Note that the logo anchor element is also a navigation anchor element (hyperlink). Its destination is the Home section or Home page, when clicked. The menu icon anchor element is not meant to be a navigation anchor element. When clicked, its work is to show the innermost div with the ID "myLinks", and hide it when clicked again. The background color of the top horizontal div bar, is #333, which is a much darker gray, than that of the background of the outer div.
Styling Each Anchor Element
There are five anchor elements in the project. All the anchor elements are coded in the top horizontal div, with class-name, "topnav". The first one is the logo anchor element. The next three are inside the innermost div in the top horizontal div element. The contents of these three anchor elements are, News, Contact, and About. The last anchor element is for the menu icon. The CSS rule for each anchor element is:
div.topnav a {
float: left;
color: white;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
Not only the logo anchor element is floated left; all the anchor elements in the div.topnav (top horizontal div) are floated left, with this CSS rule, though there is another CSS rule below, in the code, that overrides the floating left on the icon anchor element, by floating it right.
The innermost nested div with ID "myLinks", will appear on the right of the logo within the div.topnav, when needed. It will take the rest of the space until it meets the icon anchor element. Note that the innermost nested div is still a block level element. However, since its content consists of three inline anchor elements, it takes one line.
When this innermost div appears at the screen, it appears with all its anchor elements. When it disappears, when the menu icon is clicked again, it disappears with all its anchor elements. Each of the five anchor elements has a text color of white, top and bottom padding within the anchor element rectangle of 14px, left and right padding within the anchor element rectangle of 16px, font text size of 17px and no text is underlined.
Styling the Innermost div with ID "#myLinks"
Though the innermost div with ID "#myLinks"will appear under the top horizontal bar, it is coded within the div for the top horizontal bar. Its CSS rule is:
div.topnav #myLinks {
display: none;
}
This means that when the webpage loads, the innermost div is hidden (display: none). When the menu icon is clicked, a JavaScript function will show the div, by changing the display property from "display: none;" to "display: block;". When the menu icon is clicked again, the same JavaScript function will change the value of the display property to none. This procedure would repeat, and it is called, toggling.
Styling the Icon Anchor Element
The anchor element for the icon in the HTML body, has the attribute, "class='icon'". This means that its class-name is 'icon' . The CSS rule for this anchor element is:
div.topnav a.icon {
float: right;
}
It is floated to the right end of the div.topnav (top horizontal bar).
Anchor Element On-Hover
The CSS rule for each anchor element on-hover is:
div.topnav a:hover {
background-color: #ddd;
color: black;
}
When the mouse pointer goes over any anchor element, its background color should become #ddd (light gray), and its text color should become black.
First Anchor Element made Active
When the main document part of a webpage, is that for an anchor element, that anchor element is said to be active. In this simple teaching project, only the first anchor element is made active. It is possible to use JavaScript to make each anchor element active, when it is clicked, but that is not address in this tutorial. The first anchor element in the body element, has the attribute, "class='active'". This means that its CSS class-name is active. The CSS rule for this first anchor element is:
div.topnav a.active {
background-color: #04AA6D;
color: white;
}
When the webpage loads, the background color of the first anchor element is #04AA6D (greenish), and the text color is white. For this first anchor element, this CSS rule overrides the rest of the CSS rules, meant for it.
JavaScript
All the anchor elements are coded in the top horizontal div. The coding of the top horizontal div is:
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
Notice that the icon hyperlink has the onckick event that calls the JavaScript myFunction(). The attribute, href='javascript:void(0);'" prevents any section or webpage from loading, when the icon is clicked. When the icon (actually its anchor element), is clicked, the myFunction() function will check if the innermost nested div with ID "myLinks" is showing, meaning it has the property and value, "display: block;". If it is showing, it will give it the property and value, "display: none;" in order to hide it. If it was not showing, it will give it the property and value, "display: block;" in order to show it. This toggling effect can be repetitive. The JavaScript is:
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Mobile Navigation 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>
body {
font-family: Arial, Helvetica, sans-serif;
}
div.mobile-container {
max-width: 480px;
height: 500px;
margin: auto;
background-color: #555;
color: white;
border-radius: 10px;
}
div.topnav {
overflow: hidden;
background-color: #333;
}
div.topnav #myLinks {
display: none;
}
div.topnav a {
float: left;
color: white;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
div.topnav a.icon {
float: right;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
a.active {
background-color: #04AA6D;
color: white;
}
</style>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</head>
<body>
<!-- Simulate a smartphone / tablet look -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Logo</a>
<div id="myLinks">
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h3>Horizontal Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
<p><strong>Note that this example should'nt be used if you have a lot of links, as they will "break" the navbar when there's too many (especially on very small screens).</strong></p>
</div>
<!-- End smartphone / tablet look -->
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in a browser. Click the menu icon once, to see the horizontal menu appear; and then after one second, click the menu icon again. The horizontal menu that appeared, should disappear.
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