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

Need an Eye-caching Website - Contact Me Today !

Hamburger Navigation Menu

Hamburger Navigation Menu

  • 72
  • 18-Nov-2021

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

  });

});

 

 

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me