Restaurant Menu Html Css Codepen Apr 2026

/* category filter (optional interactive tabs) */ .filter-tabs display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-bottom: 2.8rem; .filter-btn background: transparent; border: 1.5px solid #e2cfb5; padding: 0.6rem 1.6rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; border-radius: 60px; cursor: pointer; transition: all 0.2s ease; color: #4f3a28; background: white; .filter-btn i margin-right: 6px; font-size: 0.85rem; .filter-btn.active background: #c17b4c; border-color: #c17b4c; color: white; box-shadow: 0 6px 12px -8px rgba(193,123,76,0.4); .filter-btn:hover:not(.active) background: #f2e6db; border-color: #cb9e78;

// attach event listeners document.querySelectorAll('.filter-btn').forEach(btn => btn.addEventListener('click', (e) => const filterValue = btn.getAttribute('data-filter'); if (filterValue === 'all') activeCategory = null; else activeCategory = filterValue; renderFilters(); // re-render to update active class renderMenuItems(); // render filtered menu ); );

body background: #f9f6ef; font-family: 'Inter', sans-serif; color: #2c2418; line-height: 1.4; scroll-behavior: smooth; restaurant menu html css codepen

/* header & hero section */ .hero text-align: center; margin-bottom: 3rem; border-bottom: 2px dashed #e6d5c0; padding-bottom: 2rem; .restaurant-name font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 600; letter-spacing: -0.5px; color: #3e2a1f; margin-bottom: 0.4rem; .restaurant-tagline font-size: 1rem; font-weight: 400; color: #8b6b4d; letter-spacing: 2px; text-transform: uppercase; background: #f3ede5; display: inline-block; padding: 0.3rem 1.2rem; border-radius: 40px; backdrop-filter: blur(2px); .menu-subhead margin-top: 1rem; font-size: 0.95rem; max-width: 580px; margin-left: auto; margin-right: auto; color: #5e4b34; font-weight: 400;

if (filteredItems.length === 0) menuGrid.innerHTML = `<div class="no-results"><i class="fas fa-utensils"></i> No dishes found in this category.<br>Try another delicious section ✨</div>`; return; /* category filter (optional interactive tabs) */

/* menu grid layout */ .menu-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem;

/* custom scrollbar */ ::-webkit-scrollbar width: 6px; ::-webkit-scrollbar-track background: #e9e0d3; ::-webkit-scrollbar-thumb background: #b87c4f; border-radius: 8px; .filter-btn background: transparent

// Extract unique categories and order (priority: Appetizers, Mains, Pasta, Desserts, Drinks) const categoryOrder = ["Appetizers", "Mains", "Pasta", "Desserts", "Drinks"]; let uniqueCategories = [...new Map(menuData.map(item => [item.category, item.category])).values()]; // sort according to preferred order, then alphabetically for any extra uniqueCategories.sort((a,b) => let indexA = categoryOrder.indexOf(a); let indexB = categoryOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) return indexA - indexB; if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); );

/* footer / signature */ .footer-note text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #ecdccb; font-size: 0.8rem; color: #a08162; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; .footer-note span i margin-right: 6px;