Kevin Powell - Community•3mo ago

Which JS show menu approach is more efficient / cleaner to you?

Watching a responsive design full site build because I am TERRIBLE at mobile first and this guys attempt looks sorta verbose to me but I'm not really the person to be talking semantics so I wanted you all to gauge these -- first one will be my approach and the second will be what the guy in the video does:

const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
  nav.classList.toggle("active");
  navList.classList.toggle("nav-active");
  burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
 burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)

const burger = document.querySelector(".hamburger");
const nav = document.querySelector(".nav");
const navList = document.querySelector(".nav-list");
const burgerBar = document.querySelectorAll(".hamburger-bar");
const header = document.querySelector(".header")

burger.addEventListener("click", () => {
  nav.classList.toggle("active");
  navList.classList.toggle("nav-active");
  burgerBar.classList.toggle("bar-toggle")
})

function toggleHamburger() {
 burgerBar.forEach(burgerBar => burgerBar.classList.toggle('hamburger-bar-toggle'))
}

burger.addEventListener('click', toggleHamburger)

Other guy's:

const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)
    
    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            // We add the show-menu class to the div tag with the nav__menu class
            nav.classList.toggle('show-menu')
        })
    }
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)
    
    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            // We add the show-menu class to the div tag with the nav__menu class
            nav.classList.toggle('show-menu')
        })
    }
}
showMenu('nav-toggle','nav-menu')

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

1 Reply

Choo♚𝕂𝕚𝕟𝕘•3mo ago

The second version is much cleaner, but it requires the correct structure in the HTML and CSS. The first version requires less planning, but the HTML and CSS really should be structured properly instead of haphazardly, so there wouldn't be any good reason to use the first version if the CSS and HTML were written properly.

Gaming

Programming

Which JS show menu approach is more efficient / cleaner to you?