Skip to content

Fully responsive hamburger menu on the right side for mobile devices , laptop and desktops also.In this menu using html5 and custom css and using javascript for open and close menu and also mobile responsive sub menu toggle slide.

Notifications You must be signed in to change notification settings

sopu175/responsive-hamburger-menu-right-with-css-and-jquery

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive Hamburger Menu With Css & Jquery

Description

Fully responsive hamburger menu on the right side for mobile devices , laptop and desktops also.In this menu using html5 and custom css and using javascript for open and close menu and also mobile responsive sub menu toggle slide.

Add Jquery cdn in footer

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Here is the html

<div class="humburger" id="hambuger_menu">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>


<!--main menu body-->
<section class="menu_body" id="menubody">
  <div class="menu_body__item_wrapper">
<!--    menu list-->
    <ul class="menu_list">
      <li><a href="#">Home</a></li>
<!--      have submenu-->
      <li class="has_child"><a href="#">About</a>
        <ul class="sub-menu">
          <li><a href="#">Who We Are</a></li>
          <li><a href="#">Managment</a></li>
        </ul>
      </li>
<!--      have submenu-->
      <li class="has_child"><a href="javascript">Projects</a>
        <ul class="sub-menu">
          <li><a href="#">Ongoing</a></li>
          <li><a href="#">Complete</a></li>
        </ul>
      </li>
      <li><a href="#">Brochure</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact Us</a></li>

    </ul>


  </div>
</section>

Here is the Jquery

      $(this).click(function (event) {
        $('.sub-menu').eq(index).slideToggle();
        event.preventDefault();
        event.stopImmediatePropagation();

      });
      $('.sub-menu').click(function (e){
        e.stopPropagation();
        e.stopImmediatePropagation();
      })
    })

Style

Follow the sass folder

Click to See the Demo Codepen

About

Fully responsive hamburger menu on the right side for mobile devices , laptop and desktops also.In this menu using html5 and custom css and using javascript for open and close menu and also mobile responsive sub menu toggle slide.

Topics

Resources

Stars

Watchers

Forks