Responsive Hamburger Navigation Menu Using HTML, CSS and JS

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"
        });
    });
});