How to Create a Vertical 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 Vertical 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, a vertical menu bar appears below the top bar, pushing the main document content downwards. When the icon is clicked again, the vertical menu bar disappears and the main document content rises up to its original placement.
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 vertical. 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.
The word, "navigation" in this tutorial, means that the vertical 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 vertical menu appear; and then after one second, click the menu icon again. The vertical menu 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>Vertical 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 vertical 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 -->
<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>Vertical 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>
</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. By its first position, it appears on 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 vertical menu to appear and disappear. Its ID is "myLinks". This innermost div has the 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 positioned on 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 {
position: relative;
background-color: #333;
}
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.
The icon anchor element is a child, to this div.topnav . So it needs to have a position property, because the child (icon anchor element) will have an absolute position property (see below).
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 {
display: block;
color: white;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
The display for each anchor element is block. With this property, the first anchor element which is the logo anchor element, which is the first content element in the div.topnav (top horizontal div), will take the whole width of the div.topnav. Under that condition, any other element typed after the logo anchor element, within the div.topnav, must appear under the div.topnav. So the nested div with ID "myLinks", will appear below the div.topnav, when needed. When it appears, as a result of clicking the menu icon, it will push down the inner div for the main document content.
The display of each of the anchor elements in the innermost div with ID "myLinks", is also block, of the same "display: block;" property of the first anchor element. With that, the anchor elements within the innermost div, will appear one below the other, giving it a vertical presentation. 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 {
background: black;
position: absolute;
right: 0;
top: 0;
}
The actual icon should be considered as an uppercase character, with code, "☰" (without the quotes). The background color of the icon character is black. Its character color is white, like the characters in the other anchor elements. This means the color of the glyph is white, and the color within the character rectangle, which is not of the glyph, is black.
Since the first anchor element has taken up all the width of the top horizontal div, this icon (character) has the position property with value, absolute, in order to be placed at the right end of the top horizontal div, but in front of the div. From the above CSS rule, the right end of the icon is 0px from the right end of the top horizontal div, and the top end of the icon is 0px from the top end of the top horizontal div.
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>Vertical 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 {
position: relative;
background-color: #333;
}
div.topnav a {
display: block;
color: white;
padding: 14px 16px;
font-size: 17px;
text-decoration: none;
}
div.topnav #myLinks {
display: none;
}
div.topnav a.icon {
background: black;
position: absolute;
right: 0;
top: 0;
}
div.topnav a:hover {
background-color: #ddd;
color: black;
}
div.topnav 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 -->
<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>Vertical 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>
</div>
<!-- End smartphone / tablet look -->
</div>
</body>
</html>
The reader should copy the complete code to 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 vertical menu appear; and then after one second, click the menu icon again. The vertical menu 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 . . .NEXT