website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

off-canvas-navigation

Off Canvas Navigation

  • 198
  • 18-Nov-2021
  • Details

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

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat