javascript - 如何仅使用 javascript 制作此切换菜单？

Question

我在我的博客模板中使用了这个默认菜单，但我注意到它使用的库会影响 Web 速度。所以请任何人帮助我在没有 jquery 库的情况下制作这个菜单。谢谢你。

<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/检查此演示，由于尺寸太大，我无法添加 css

Answer 1

这是纯 JavaScript 的翻版。
基本上它使用的是:

一个小实用函数EL()查询 DOM 中的元素

.addEventListener()而不是 jQuery .on()和 .click()方法

.cloneNode()使用 true 克隆元素的方法论据

.classList.toggle()方法而不是 jQuery 的 .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>

为了激发您的想象力，这里完全没有 JS:

#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>