He usado este menú predeterminado en mi plantilla de blogger, pero he notado que la biblioteca utilizada afecta la velocidad de la Web. Entonces, por favor, alguien me ayuda a hacer este menú sin la biblioteca jquery. Gracias.
<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>Aquí hay una nueva versión en JavaScript puro.
Básicamente lo que utiliza es:
EL() para consultar el DOM por elementos.on() y .click()true.toggleClass() de jQuery 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>Y solo para darle vida a tu imaginación, aquí hay uno sin 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>