Live Preview
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Multi-level Hamburger Navigation</title>
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="js/main.js"></script>
<style>
h1,
.lead {
text-align: center;
}
h1 {
margin-top: 150px;
}
</style>
</head>
<body>
<header>
<span id="button-menu" class="fa fa-bars"></span>
<nav class="atechnav">
<ul class="menu">
<!--title-->
<li class="title-menu">AtechSeva</li>
<!--title-->
<li>
<a href="#"><span class="fa fa-home icon-menu"></span>Home</a>
</li>
<li></li>
<li class="item-submenu" menu="1">
<a href="#"><span class="fa fa-suitcase icon-menu"></span>Services</a>
<ul class="submenu">
<li class="title-menu"><span class="fa fa-suitcase icon-menu"></span>Services</li>
<li class="go-back">Back</li>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li class="item-submenu" menu="2">
<a href="#"><span class="fa fa-shopping-bag icon-menu"></span>Products</a>
<ul class="submenu">
<li class="title-menu"><span class="fa fa-shopping-bag icon-menu"></span>Products</li>
<li class="go-back">Back</li>
<li><a href="#">JavaScript</a></li>
<li></li>
<li><a href="#">HTML5</a></li>
<li></li>
<li><a href="#">CSS3</a></li>
<li></li>
</ul>
</li>
<li>
<a href="#"><span class="fa fa-envelope icon-menu"></span>Contact</a>
</li>
<li></li>
<li>
<a href="#"><span class="fa fa-tag icon-menu"></span>Blog</a>
</li>
<li></li>
</ul>
</nav>
</header>
</body>
</html>
nav.css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif !important;
background: #e8e8e8;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 20px;
background: #222222;
}
header #button-menu {
font-size: 30px;
color: #fff;
cursor: pointer;
}
.atechnav {
position: absolute;
top: 100%;
left: 0;
width: 0%;
height: 100vh;
background: rgba(0, 0, 0, 0);
}
.atechnav ul {
width: 320px;
height: 100%;
background: #fff;
list-style: none;
position: absolute;
top: 0;
left: -320px;
transition: left 0.3s;
}
.atechnav .menu li.title-menu {
padding: 20px;
background: #323232;
color: #fff;
text-align: center;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;
}
.atechnav .menu a {
display: block;
padding: 20px;
border-bottom: 1px solid #c6d0da;
font-size: 22px;
font-weight: 200;
text-decoration: none;
color: #575d69;
}
.atechnav .menu a:hover {
background: #474747;
color: #fff;
transition: all 0.5s ease;
}
.atechnav .menu li span.icon-menu {
margin-right: 12px;
}
.atechnav .menu .item-submenu > a::after {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f105";
float: right;
color: #c5c5c5;
}
/* Submenu ============*/
.atechnav .submenu li.title-menu {
background: #fff;
color: #575d69;
}
.atechnav .submenu li.go-back {
padding: 10px 20px;
background: #363636;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.atechnav .submenu li.go-back::before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f0d9";
margin-right: 10px;
}
@media screen and (max-width: 320px) {
.atechnav ul {
width: 100%;
}
}
main.js
$(document).ready(function ()
{
$("#button-menu").click(function ()
{
if ($("#button-menu").attr("class") == "fa fa-bars")
{
$(".atechnav").css(
{
width: "100%",
background: "rgba(0,0,0,.5)"
});
$("#button-menu").removeClass("fa fa-bars").addClass("fa fa-close");
$(".atechnav .menu").css(
{
left: "0px"
});
}
else
{
$(".atechnav").css(
{
width: "0%",
background: "rgba(0,0,0,.0)"
});
$("#button-menu").removeClass("fa fa-close").addClass("fa fa-bars");
$(".atechnav .submenu").css(
{
left: "-320px"
});
$(".atechnav .menu").css(
{
left: "-320px"
});
}
});
$(".atechnav .menu > .item-submenu a").click(function ()
{
var positionMenu = $(this).parent().attr("menu");
console.log(positionMenu);
$(".item-submenu[menu=" + positionMenu + "] .submenu").css(
{
left: "0px"
});
});
$(".atechnav .submenu li.go-back").click(function ()
{
$(this).parent().css(
{
left: "-320px"
});
});
});