Every website needs Navigation bar to navigate on the website properly and this is very usefull for users as well.If a website does not have good navigation interface, users prefer to leave this type of website immediately.
Table of Contents
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 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>
<div style="font-size:30px;cursor:pointer" onclick="openNav()" class="menu">☰ MENU</div>
<nav id="navbar">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu">
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Mission and Vission</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</div>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Services <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu">
<ul>
<li class="nested"><a href="#">Website <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-2">
<ul>
<li><a href="#">Designing</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Maintenance</a></li>
</ul>
</div>
</li>
<li><a href="#">Marketing</a></li>
<li class="nested"><a href="#">Mobile App <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-2">
<ul>
<li><a href="#">Designing</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Mobile Marketing</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<!-- Mobile Menu -->
<div id="myNav" class="overlay">
<b class="name">MENU</b>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<nav id="navbar-m">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-m">
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Mission and Vission</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</div>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Services <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-m">
<ul>
<li class="nested-m"><a href="#">Website <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-2-m">
<ul>
<li><a href="#">Web Designing and Development</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">Mobile App Development </a></li>
</ul>
</div>
</li>
<li><a href="#">Marketing</a></li>
<li class="nested-m"><a href="#">Mobile App <i class="fa fa-angle-down" style="font-size:16px"></i></a>
<div class="submenu-2-m">
<ul>
<li><a href="#">Web Designing and Development</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">Mobile App Development </a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20openNav()%20%7B%0A%20%20document.getElementById(%22myNav%22).style.width%20%3D%20%22100%25%22%3B%0A%7D%0A%0Afunction%20closeNav()%20%7B%0A%20%20document.getElementById(%22myNav%22).style.width%20%3D%20%220%25%22%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
style.css
*
{
margin:0px;
padding:0px;
font-family: 'Lato', sans-serif;
}
body
{
background-image:url('images/bck.jpg');
background-size:cover;
}
.menu
{
display:none;
}
#navbar-m
{
display:none;
}
#navbar
{
background-image: linear-gradient(to right, #60002d,#eb0a35,#e44d25);
color:white;
text-align:center;
}
#navbar ul
{
display:inline-flex;
text-decoration:none;
color:white;
list-style:none;
}
#navbar ul li
{
width:150px;
padding:20px 10px 20px 10px;
}
#navbar ul li:hover
{
background-color:#e44d25;
}
#navbar ul li a
{
text-decoration:none;
color:white;
text-transform:uppercase;
}
.active
{
background-color:#e44d25;
}
.submenu
{
display:none;
}
#navbar ul li:hover .submenu
{
background-color:#e44d25;
display:block;
position:absolute;
margin-top:10px;
margin-left:-10px;
}
#navbar ul li:hover .submenu ul
{
text-align:left;
display:block;
margin-top:10px;
}
#navbar ul li:hover .submenu ul li
{
width:200px;
border-bottom:1px solid black;
padding-left:33px;
padding-right:33px;
}
#navbar ul li:hover .submenu ul li:hover
{
background-color:black;
}
.submenu-2
{
display:none;
}
.nested:hover .submenu-2
{
background-color:black;
display:block;
position:absolute;
margin-top:-39px;
margin-left:220px;
}
.nested .fa-angle-down
{
float:right;
}
@media screen and (max-width: 900px){
body
{
background-image:url('images/bck.jpg');
background-size:auto;
}
.menu
{
display:block;
background-color:black;
color:white;
padding:10px;
}
#navbar
{
display:none;
}
#navbar-m
{
display:block;
background-color: rgba(0,0,0, 0.0);
color:white;
text-align:left;
}
#navbar-m ul
{
display:block;
text-decoration:none;
color:white;
list-style:none;
}
#navbar-m ul li
{
width:auto;
padding:10px;
}
#navbar-m ul li:hover
{
background-color: rgba(0,0,0, 0.0);
}
#navbar-m ul li a
{
width:auto;
text-decoration:none;
color:white;
text-transform:uppercase;
border-bottom:1px solid #f97e1b;
}
.active
{
background-color: rgba(0,0,0, 0.0);
}
.submenu-m
{
display:none;
}
#navbar-m ul li:hover .submenu-m
{
width:auto;
display:block;
position:relative;
margin-top:10px;
background-color: rgba(0,0,0, 0.0);
}
#navbar-m ul li:hover .submenu-m ul
{
text-align:left;
display:block;
margin-top:10px;
padding-left:30px;
}
#navbar-m ul li:hover .submenu-m ul li
{
width:auto;
border-bottom:0px solid black;
background-color: rgba(0,0,0, 0.0);
padding-left:0px;
padding-right:0px;
}
#navbar-m ul li:hover .submenu-m ul li:hover
{
background-color: rgba(0,0,0, 0.0);
}
.submenu-2-m
{
display:none;
}
.nested-m:hover .submenu-2-m
{
background-color: rgba(0,0,0, 0.0);
display:block;
position:relative;
margin-top:8px;
margin-left:0px;
}
.nested-m .fa-angle-down
{
float:right;
}
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-image: linear-gradient(to right, #60002d,#eb0a35,#e44d25);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 4%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 0px;
right: 5px;
font-size: 50px;
color:white;
}
.overlay .name {
position: absolute;
top: 20px;
left: 15px;
font-size: 30px;
color:white;
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 50px;
top: 3px;
right: 5px;
}
}
Output
Laptop and Desktop View
Mobile View
Ravindra is Web & Mobile application designer and developer. He is experienced guy in web & mobile app designing and development. He is a tech blogger too.
Related Posts:
