Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a top navigation menu for smartphones / tablets with CSS and JavaScript?
In this article, we are going to discuss how to create a responsive top navigation menu for smartphones and tablets using CSS and JavaScript.
A navigation bar is usually the first pit-stop for users visiting a website who seek guidance to navigate through the site. It contains links to different sections of your website, providing easy access to important pages.
Creating a mobile-friendly navigation menu involves using CSS media queries to hide navigation links on small screens and display a hamburger menu icon instead. When clicked, this icon toggles the visibility of the navigation links.
How It Works
The responsive navigation works by:
- Showing all navigation links on desktop screens
- Hiding links and showing a hamburger icon on mobile devices (width < 600px)
- Using JavaScript to toggle the menu visibility when the hamburger icon is clicked
HTML Structure
First, create the HTML structure with navigation links and a hamburger icon:
<div class="navbar" id="myNavbar"> <a href="#home" class="active">Home</a> <a href="#tutorials">Tutorials</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">?</a> </div> <div style="padding-top: 80px; text-align: center;"> <h2>Responsive Navigation Menu</h2> <p>Resize the browser window to see the mobile menu in action.</p> </div>
CSS Styling
Add CSS styles for the navigation bar and responsive behavior:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
/* Mobile styles */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
JavaScript Functionality
Add JavaScript to toggle the responsive menu:
function toggleMenu() {
var navbar = document.getElementById("myNavbar");
if (navbar.className === "navbar") {
navbar.className += " responsive";
} else {
navbar.className = "navbar";
}
}
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="myNavbar">
<a href="#home" class="active">Home</a>
<a href="#tutorials">Tutorials</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="toggleMenu()">?</a>
</div>
<div style="padding-top: 80px; text-align: center;">
<h2>Responsive Navigation Menu</h2>
<p>Resize the browser window to see the mobile menu in action.</p>
<p>On mobile devices, click the hamburger icon (?) to toggle the menu.</p>
</div>
<script>
function toggleMenu() {
var navbar = document.getElementById("myNavbar");
if (navbar.className === "navbar") {
navbar.className += " responsive";
} else {
navbar.className = "navbar";
}
}
</script>
</body>
</html>
Key Features
| Feature | Desktop | Mobile |
|---|---|---|
| Navigation Links | Visible horizontally | Hidden by default |
| Hamburger Icon | Hidden | Visible on right side |
| Menu Toggle | Not needed | Click hamburger to show/hide |
Conclusion
This responsive navigation menu provides an excellent user experience across all devices. The CSS media queries handle the responsive design while JavaScript manages the menu toggle functionality for mobile users.
757 Views
