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.