How to make this toggle menu with only javascript?-CodePudding

I have use this default menu in my blogger template but I have noticed the library used on it affacting the Web speed. So please anyone help me to make this menu without jquery library. Thank you.

<script rel='preload' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<div class='main-nav-main'>
  <div class='mobile-menu' />
  <div class='ct-wrapper'>
    <span class='slide-menu-toggle'>Menu</span>
    <!-- Main menu -->
    <ul class='sf-menu'>
      <li><a href='/'>Home</a></li>
      <li><a href='/p/sample-page_12.html'>sample page</a></li>
      <li><a href='#'>drop down</a>
    </ul>
  </div>
</div>

<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $('ul.sf-menu').clone().appendTo('.mobile-menu');
    $('.slide-menu-toggle').on('click', function() {
      $('body').toggleClass('nav-active');
    });

  });
  //]]>
</script>

https://bltemplatetest2.blogspot.com/ check this for demo, I couldn't add css because of large size

CodePudding user response：

Here's a remake in pure JavaScript.
Basically what it uses is:

a small utility function EL() to query the DOM for elements
.addEventListener() instead of jQuery .on() and .click() methods
.cloneNode() method to clone elements with the true argument
.classList.toggle() method instead of jQuery's .toggleClass()

const EL = (sel, el) => (el || document).querySelector(sel);

const EL_body = EL("body");
const EL_menu_sf = EL(".sf-menu");
const EL_menu_sf_cln = EL_menu_sf.cloneNode(true);
const EL_menu_mobile = EL(".mobile-menu");
const EL_menu_toggle = EL(".slide-menu-toggle");

EL_menu_mobile.append(EL_menu_sf_cln);

EL_menu_toggle.addEventListener("click", () => {
  EL_body.classList.toggle("nav-active");
});

.mobile-menu                 { display: none; }
body.nav-active .mobile-menu { display: block; }

<div class='main-nav-main'>
  <div class='mobile-menu'></div>
  <div class='ct-wrapper'>
    <span class='slide-menu-toggle'>Menu (click me)</span>
    <!-- Main menu -->
    <ul class='sf-menu'>
      <li><a href='/'>Home</a></li>
      <li><a href='/p/sample-page_12.html'>sample page</a></li>
      <li><a href='#'>drop down</a>
    </ul>
  </div>
</div>

And just to spice your imagination, here's one without JS at all:

#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #ddd;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: 0.4s;
}

#menu nav {
  margin: auto;
  display: flex;
  gap: 1em;
  flex-direction: column;
}

.menu-icon {
  position: fixed;
  top: 1em;
  right: 2em;
  font-size: 2em;
  cursor: pointer;
}

#menu-toggle:checked~#menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

<input id="menu-toggle" type="checkbox" hidden />

<label  for="menu-toggle" aria-label="Toggle menu">☰</label>

<div id="menu">

  <label  for="menu-toggle" aria-label="Toggle menu">✖</label>

  <nav>
    <a href="#!">HOME</a>
    <a href="#!">ABOUT</a>
    <a href="#!">PRODUCTS</a>
    <a href="#!">CONTACT</a>
  </nav>

</div>