Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 top navigation menu for smartphones / tablets using CSS and JavaScript.
A navigation bar is usually the first pit−stop for the users visiting the website who seek guidance to walk through the website. It contains the list of elements present in your website; including the links to navigate through the website.
To create a top navigation menu for smartphones and tablet it is easy, first we have to create a navigation menu page add media query inside the CSS. If width of the devices is less than 600px then add the below given CSS property.
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
Example
Following are the steps to be followed to create a top navigation menu for smartphones. In this example, we are creating a webpage displaying the “top navigation menu”. A menu with 4 links which will appear after click.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required text, a drop down menu and empty navigation Links for the menu.
<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);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-top:200px; text-align: center;">
<h2>Menu for Smart-phone, ipad, and mobiles</h2>
<p>Resize the browser window to see how it works on mobiles phone.</p>
</div>
Example.css
Add CSS style to give a background and hover effect on the top navigation menu for a better look. In this example we are styling the top navigation menu if we hover on the link background color will be change.
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: rgba(43, 194, 106, 0.8);
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: rgb(214, 39, 39);
color: black;
}
.navbar a.active {
background-color: #045faa;
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;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
Example.js
Using JavaScript, we can perform validation and handle event on the page. In this example we are using active class for Home, and adding the responsive class for responsiveness.
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
Complete Example
Following is the complete example to create a menu bar/ navigation bar for mobiles phone.
<!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: rgba(43, 194, 106, 0.8);
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: rgb(214, 39, 39);
color: black;
}
.navbar a.active {
background-color: #045faa;
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;
}
}
@media screen and (max-width: 600px) {
.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);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-top:200px; text-align: center;">
<h2>Menu for Smart-phone, ipad, and mobiles</h2>
<p>Resize the browser window to see how it works on mobiles phone.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
517 Views
To Continue Learning Please Login