Restaurant Menu Page Layout

Restaurant websites rely entirely on high-quality visuals and easy-to-read pricing. We use CSS Grid to layout the food items and JavaScript to toggle between Breakfast, Lunch, and Dinner tabs.

Tab Filtering

function showCategory(category) {
  // Hide all
  document.querySelectorAll('.menu-category').forEach(el => {
    el.style.display = 'none';
  });
  
  // Show selected
  document.getElementById(category).style.display = 'grid';
}

The Image Zoom

.food-img-wrapper {
  overflow: hidden;
  border-radius: 12px;
}
.food-img-wrapper img {
  transition: transform 0.4s ease;
}
.food-img-wrapper:hover img {
  transform: scale(1.1);
}

Check out the Live Demo to click through the beautiful tab categories.