function setActive(activeBtn) btns.forEach(btn => btn.classList.remove("active")); activeBtn.classList.add("active"); const categoryValue = activeBtn.getAttribute("data-category"); renderMenu(categoryValue);
<!-- Main content --> <main class="relative z-10"> <!-- Navigation --> <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[rgba(26,22,18,0.8)] border-b border-[var(--border)]"> <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <a href="#" class="font-display text-2xl font-bold tracking-wide text-[var(--accent)]">Ember & Oak</a> <div class="hidden md:flex items-center gap-8"> <a href="#menu" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">Menu</a> <a href="#" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">About</a> <a href="#" class="text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors">Contact</a> <button class="btn-reserve px-5 py-2 border border-[var(--accent)] text-[var(--accent)] rounded font-medium"> <span>Reserve</span> </button> </div> <button id="mobileMenuBtn" class="md:hidden p-2 text-[var(--fg)]" aria-label="Toggle menu"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> </div> </nav> restaurant menu html css codepen
A successful goes beyond just listing food. It should include: function setActive(activeBtn) btns
// filter data let filteredItems = []; if (activeCategory === "all") filteredItems = [...menuData]; else filteredItems = menuData.filter(item => item.category === activeCategory); function setActive(activeBtn) btns.forEach(btn =>