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

Need an Eye-caching Website - Contact Me Today !

Responsive Hamburger Menu

Responsive Hamburger Menu

  • 66
  • 18-Nov-2021

INDEX.HTML

!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <title>Stanislav Andreev</title>

 

    <!-- normalize css -->

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"

    />

    <!-- https://fonts.google.com/ -->

    <link

      href="https://fonts.googleapis.com/css?family=Quicksand"

      rel="stylesheet"

      type="text/css"

    />

    <!-- https://fontawesome.com/ -->

    <link

      rel="stylesheet"

      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"

      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"

      crossorigin="anonymous"

    />

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <link href="css/navigation.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

    <!-- Header and nav -->

    <header>

      <section id="nav">

        <div class="wrapper">

          <nav class="site-nav">

            <!-- <h1 class="logo">Atech<span>Seva</span></h1> -->

            <h1 class="logo"><img src="logo/logo.png" alt="" /></h1>

            <div class="menu-toggle">

              <div class="hamburger"></div>

            </div>

            <ul class="open desktop">

              <li>

                <a href="javascript:void(0)" id="one"

                  ><i class="fas fa-home site-nav--icon"></i>Home</a

                >

              </li>

              <li>

                <a href="javascript:void(0)"

                  ><i class="fas fa-users site-nav--icon"></i>About us</a

                >

              </li>

              <li>

                <a href="javascript:void(0)"

                  ><i class="fas fa-download site-nav--icon"></i>Service</a

                >

              </li>

              <li>

                <a href="javascript:void(0)"

                  ><i class="fas fa-globe site-nav--icon"></i>Blog</a

                >

              </li>

              <li>

                <a href="javascript:void(0)"

                  ><i class="fas fa-phone site-nav--icon"></i>Contact us</a

                >

              </li>

            </ul>

          </nav>

        </div>

      </section>

    </header>

 

    <!-- script for navigation menu -->

    <script

      src="https://code.jquery.com/jquery-3.4.1.min.js"

      integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"

      crossorigin="anonymous"

    ></script>

    <script src="js/01.js"></script>

  </body>

</html>

 

 

JS
$.noConflict();
jQuery(document).ready(function($) {
    $('.menu-toggle').click(function() {
      $('ul').toggleClass('opening');
      $(this).toggleClass('open');
    });
});

Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me