Off Canvas Navigation using HTML, CSS and JS

index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Responsive Offcanvas Menu</title>

    <link href="css/offcanvas.css" rel="stylesheet" />
  </head>

  <body>
    <section id="offcanvas-sidebar">
      <div>
        <h4>Menu 1</h4>

        <ul>
          <li>
            <a href="#">Link 1.1</a>

            <ul>
              <li><a href="#">Link 1.1.1</a></li>

              <li><a href="#">Link 1.1.2</a></li>

              <li><a href="#">Link 1.1.3</a></li>

              <li><a href="#">Link 1.1.4</a></li>
            </ul>
          </li>

          <li><a href="#">Link 1.2</a></li>

          <li><a href="#">Link 1.3</a></li>

          <li><a href="#">Link 1.4</a></li>
        </ul>

        <h4>Menu 2</h4>

        <ul>
          <li><a href="#">Link 2.1</a></li>

          <li><a href="#">Link 2.2</a></li>

          <li><a href="#">Link 2.3</a></li>
        </ul>
      </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="js/offcanvas.min.js"></script>
  </body>
</html>

offcanvas.css

body {
     margin: 0;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: scrollbar;
}
 html {
     box-sizing: border-box;
}
 *, *:before, *:after {
     box-sizing: inherit;
}
 body {
     font-family: "Open Sans", sans-serif;
     font-size: 16px;
     font-weight: 300;
     line-height: 1.6;
     overflow: hidden;
     min-height: 100vh;
}
 .container {
     max-width: 728px;
     margin: auto;
     padding: 20px;
     min-height: 100vh;
}
 #offcanvas-sidebar {
     width: 250px;
     height: 100%;
     position: fixed;
     top: 0;
     overflow-x: hidden;
     overflow-y: auto;
     transition: all 400ms ease;
}
 #page-wrap {
     background: #fff;
     transition: all 400ms ease;
}
 #offcanvas-navicon {
     position: fixed;
     top: 8px;
     right: 0;
     z-index: 102;
     height: 48px;
     width: 48px;
     padding: 10px 6px;
     background: rgb(255 255 255 / 62%);
     border-radius: 50%;
     transition: all 400ms ease;
}
 #offcanvas-navicon:after, #offcanvas-navicon:before, #offcanvas-navicon span {
     display: block;
     content: "";
     display: block;
     height: 4px;
     margin: 4px;
     border-radius: 2px;
     background: #000;
     transition: all 400ms ease;
}
 #offcanvas-navicon:hover {
     cursor: pointer;
}
 .offcanvas-open #offcanvas-navicon:before {
     transform: translate3d(0, 8px, 0) rotate(135deg);
}
 .offcanvas-open #offcanvas-navicon:after {
     transform: translate3d(0, -8px, 0) rotate(-135deg);
}
 .offcanvas-open #offcanvas-navicon span {
     transform: scale(0);
}
 #offcanvas-sidebar {
     background: #181818;
     padding-top: 50px;
}
 #offcanvas-sidebar h4 {
     margin: 24px 0 0;
     color: #f3f3f3;
     padding: 15px 16px;
}
 #offcanvas-sidebar h4 a {
     margin: -8px -16px;
}
 #offcanvas-sidebar ul {
     width: 250px;
     margin: 0;
     border-top: 1px dashed rgb(214, 214, 214);
     list-style-type: none;
     padding: 0;
}
 #offcanvas-sidebar li {
     border-bottom: 1px dashed rgb(214, 214, 214);
}
 #offcanvas-sidebar a {
     display: block;
     padding: 15px 16px;
     color: #e3e3e3;
     text-decoration: none;
     transition: all 0.25s ease;
}
 #offcanvas-sidebar a:hover {
     color: #ccc;
     background: #444;
     cursor: pointer;
}
 #offcanvas-sidebar ul ul {
     display: none;
     position: absolute;
     float: right;
     margin-top: -41px;
     margin-left: 250px;
}
 #offcanvas-sidebar div {
     transition: all 400ms ease;
}
 #offcanvas-sidebar.offcanvas-child-open > div {
     margin-left: -250px;
}
 #offcanvas-sidebar.offcanvas-child-open > div .offcanvas-child-visible {
     display: block;
}
 .offcanvas-child-link {
     position: absolute;
     display: inline-block;
     width: 44px;
     height: 55px;
     margin-top: -55px;
     margin-left: 205px;
     border-left: 1px dashed rgb(214, 214, 214);
     padding: 14px 16px;
     background: #181818;
     color: #e3e3e3;
     text-decoration: none;
     transition: all 0.25s ease;
}
 .offcanvas-child-link:hover {
     color: #ccc;
     background: #444;
     cursor: pointer;
}
 .offcanvas-child-back-link {
     position: absolute;
     display: block;
     width: 100%;
     margin-top: -50px;
     border-top: 1px solid rgb(255 255 255);
     padding: 14px 16px;
     color: #262626;
     text-decoration: none;
     transition: all 0.25s ease;
     background: white;
}
 .offcanvas-child-back-link:hover {
     color: #ccc;
     background: #444;
     cursor: pointer;
}
 body #offcanvas-navicon {
     right: 8px;
}
 body #offcanvas-sidebar {
     right: 0;
     z-index: 101;
     margin-right: -250px;
}
 body.offcanvas-open #page-wrap {
     margin-left: -250px;
     margin-right: 250px;
}
 body.offcanvas-open #offcanvas-sidebar {
     margin-right: 0;
}

offcanvas.min.js

! function ($)
{
    "use strict";
    $(document).ready(function ()
    {
        function a()
        {
            $("body").addClass("offcanvas-open")
        }
        
        function n()
        {
            $("body").removeClass("offcanvas-open"), $("#offcanvas-sidebar ul ul").removeClass("offcanvas-child-visible"), $("#offcanvas-sidebar").delay(400).animate(
            {
                scrollTop: 0
            }, 50)
        }
        
        function s(s)
        {
            $("body").hasClass("offcanvas-open") ? n() : a(), s.preventDefault()
        }
        
        function c()
        {
            $("#offcanvas-sidebar").addClass("offcanvas-child-open")
        }
        
        function o()
        {
            $("#offcanvas-sidebar").removeClass("offcanvas-child-open")
        }
        
        function f(a)
        {
            $(a.currentTarget).siblings("ul").addClass("offcanvas-child-visible"), c(), a.preventDefault()
        }
        
        function e(a)
        {
            $(a.currentTarget).parents("ul").removeClass("offcanvas-child-visible"), o(), a.preventDefault()
        }
        
        function i(a)
        {
            $("body").hasClass("offcanvas-open") && (n(), o(), a.preventDefault())
        }
        $("body").prepend('<div id="offcanvas-navicon"><span></span></div>'), $("#offcanvas-sidebar ul ul").parent().append('<span class="offcanvas-child-link">&raquo;</span>'), $("#offcanvas-sidebar ul ul").prepend('<span class="offcanvas-child-back-link">&laquo; Back</span>'), $("#offcanvas-navicon").on("click", s), $("#offcanvas-navicon").on("touchstart", s), $(".offcanvas-child-link").on("click", f), $(".offcanvas-child-link").on("touchstart", f), $(".offcanvas-child-back-link").on("click", e), $(".offcanvas-child-back-link").on("touchstart", e), $("#page-wrap").on("click", i), $("#page-wrap").on("touchstart", i), $(window).on("resize", i)
    })
}(jQuery);