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

Need an Eye-caching Website - Contact Me Today !

responsive-hamburger-navigation-menu

Hamburger Navigation Menu

  • 128
  • 18-Nov-2021
  • Codepen

  • Details

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

     

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat