Every website have a header section with navigation menu. It’s important to make it fully responsive. In this post, I am going to teach you how you can create a mobile friendly, animated header navigation menu which will be perfectly fit in every device.
Source Code is given below:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Desktop header begin -->
<div class="header">
<div>
<h2>MaduWebTech</h2>
</div>
<ul id="menu">
<li><a href=""><i class="fa fa-home"></i> Home</a></li>
<li><a href=""><i class="fa fa-cog"></i> Services</a></li>
<li><a href=""><i class="fa fa-users"></i> Team</a></li>
<li><a href=""><i class="fa fa-info-circle"></i> About</a></li>
<li><a href=""><i class="fa fa-phone"></i> Contact</a></li>
</ul>
</div>
<!-- Desktop header end -->
<!-- Mobile header begin -->
<div class="mb-header">
<div class="top-bar">
<div><h2>MaduWebTech</h2></div>
<div>
<span onclick="show_menu()" id="show"><i class="fa fa-bars" aria-hidden="true"></i></span>
<span onclick="hide_menu()" id="hide">×</span>
</div>
</div>
<ul id="mb-menu">
<li><a href=""><i class="fa fa-home"></i> Home</a></li>
<li><a href=""><i class="fa fa-gear"></i> Services</a></li>
<li><a href=""><i class="fa fa-users"></i> Team</a></li>
<li><a href=""><i class="fa fa-info-circle"></i> About</a></li>
<li><a href=""><i class="fa fa-phone"></i> Contact</a></li>
</ul>
</div>
<!-- Mobile header end -->
<script type="text/javascript" src="header.js"></script>
</body>
</html>CSS
*{margin: 0;padding:0;box-sizing: border-box;}
body{
font-family: Arial;
background-color:#eee;
}
.header{
display: flex;
justify-content: space-around;
align-items: center;
background-color: navy;
padding: 20px;
}
.header h2{
color:#fff;
cursor: pointer;
font-family: cursive;
}
#menu{
display: flex;
}
#menu li{
list-style: none;
padding: 0 15px 0 15px;
}
#menu li a{
text-decoration: none;
color:#fff;
}
@media (max-width: 767px)
{
.header{display: none;}
}
@media (min-width: 768px)
{
.mb-header{display: none;}
}
.mb-header{
background-color: navy;
color:#fff;
width: 100%;
}
.mb-header .top-bar h2{
font-family: cursive;
}
.top-bar{
display: flex;
justify-content: space-between;
padding: 20px;
align-items: center;
}
#mb-menu{
display: none;
padding-left: 20px;
padding-right: 20px;
animation: menu 1s;
}
#mb-menu li{
list-style: none;
padding: 15px 0 15px 0;
border-bottom: 1px solid grey;
}
#mb-menu li a{
text-decoration: none;
color:#fff;
font-size: 1.2rem;
}
#show{
font-size: 1.5rem;
cursor: pointer;
}
#hide{
font-size: 2rem;
display: none;
cursor: pointer;
}
@keyframes menu{
0%{
transform: translateX(100%);
}
100%{
transform: translateX(0);
}
}JavaScript
function show_menu()
{
var a=document.getElementById('mb-menu');
a.style.display="block";
var b=document.querySelector('.mb-header');
b.style.height="100vh";b.style.position="fixed";
var c=document.querySelector('#show');
c.style.display="none";
var c=document.querySelector('#hide');
c.style.display="block";
}
function hide_menu()
{
var a=document.getElementById('mb-menu');
a.style.display="none";
var b=document.querySelector('.mb-header');
b.style.height="unset";b.style.position="static";
var c=document.querySelector('#show');
c.style.display="block";
var c=document.querySelector('#hide');
c.style.display="none";
}Download Complete Project:
