main-header-menu.js | Creating Responsive Hamburger Navigation with JavaScript

main-header-menu.js is a javascript responsive, cross-platform hamburger header navigation, we can use it to create an off-canas and responsive menu for web application easily.

main-header-menu.js - Creating Responsive Hamburger Navigation with JavaScript

AuthorLinksMade withLast update
nathanssantosOffice HomeJavaScriptFeb 14, 2022

How to create responsive hamburger navigation using main-header-menu.js?

1.Import main-header-menu.js and its theme stylesheet in html page

<link rel="stylesheet" href="/css/main-header-menu.css">
<script src="/js/main-header-menu.js"></script>

2.Create a header navigation

<header class="main-header">
  <div class="container">
    <img class="main-header-logo" src="assets/images/logo.png"></img>
    <nav class="main-header-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS/CSS3</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
    <button class="main-header-side-menu-button" onclick="toggleSideMenu(1)">
      <div class="stripes"></div>
      <div class="stripes"></div>
      <div class="stripes"></div>
      <div class="stripes"></div>
    </button>
  </div>
</header>

3.Create another navigation for the off-canvas side menu

<nav class="side-menu">
  <div class="side-menu-content">
    <ul>
      <li><a href="#" class="side-menu-item">Home</a></li>
      <li><a href="#" class="side-menu-item">jQuery</a></li>
      <li><a href="#" class="side-menu-item">HTML</a></li>
      <li><a href="#" class="side-menu-item">CSS/CSS3</a></li>
      <li><a href="#" class="side-menu-item">About</a></li>
    </ul>
  </div>
  <div class="side-menu-close-div"></div>
</nav>

Leave a Reply

Your email address will not be published. Required fields are marked *