How to make this toggle menu with only javascript?

Question

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

@EmielZuurbier by not loading the jQuery library obviously. (Well, unless cached already by the browser) — Roko C. Buljan
– Roko C. Buljan, Commented Dec 31, 2021 at 14:24
@desbest That's quite the difference. But you don't know if the size of the script is the issue. Google Pagespeed scores give you penalties on any script that is render blocking, even if it is small. Besides, Snack gives you more functionalities than this solution requires. A Vanilla JS rewrite solves both the size and / or render blocking issue. — Emiel Zuurbier
– Emiel Zuurbier, Commented Dec 31, 2021 at 14:37

Roko C. Buljan · Accepted Answer · 2021-12-31 15:00:00Z

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 class="menu-icon" for="menu-toggle" aria-label="Toggle menu">☰</label>

<div id="menu">

  <label class="menu-icon" 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>

Collectives™ on Stack Overflow

How to make this toggle menu with only javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related