How to Create a Responsive Restaurant Menu Card Using HTML, CSS and JavaScript

How to Create a Responsive Restaurant Menu Card Using HTML, CSS and JavaScript

Restaurant websites often need to display a large number of menu items without making the page difficult to navigate. A simple menu card can solve this problem by combining HTML for structure, CSS for design, and JavaScript for small interactive features.

In this tutorial, we'll create a responsive restaurant menu card from scratch.

The project will include:

• Menu item name
• Description
• Price
• Calories
• Category
• Responsive layout
• Simple category filtering
• Mobile-friendly design

1. Creating the HTML Structure

First, let's create the basic structure for our restaurant menu.

<div class="menu-container">

  <h1>Restaurant Menu</h1>

  <div class="filters">
    <button data-category="all">All</button>
    <button data-category="chicken">Chicken</button>
    <button data-category="pasta">Pasta</button>
    <button data-category="dessert">Dessert</button>
  </div>

  <div class="menu-grid">

    <div class="menu-card" data-category="chicken">
      <h2>Grilled Chicken</h2>
      <p>Grilled chicken served with vegetables and your choice of side.</p>
      <div class="menu-info">
        <span>$14.99</span>
        <span>520 cal</span>
      </div>
    </div>

    <div class="menu-card" data-category="pasta">
      <h2>Creamy Pasta</h2>
      <p>Creamy pasta prepared with vegetables and a flavorful sauce.</p>
      <div class="menu-info">
        <span>$13.99</span>
        <span>680 cal</span>
      </div>
    </div>

    <div class="menu-card" data-category="dessert">
      <h2>Chocolate Dessert</h2>
      <p>A sweet chocolate dessert served after your meal.</p>
      <div class="menu-info">
        <span>$7.99</span>
        <span>450 cal</span>
      </div>
    </div>

  </div>

</div>

The menu-card class represents an individual menu item.

The data-category attribute will later allow JavaScript to filter the menu.

2. Adding CSS

Now let's make the menu look cleaner and responsive.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
}

.menu-container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px;
}

.menu-container h1 {
  text-align: center;
  margin-bottom: 25px;
}

.filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filters button {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: #222;
  color: white;
}

.filters button:hover {
  opacity: 0.8;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.menu-card {
  background: white;
  padding: 22px;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.menu-card h2 {
  margin-top: 0;
}

.menu-card p {
  line-height: 1.6;
  color: #555;
}

.menu-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

The CSS grid automatically creates three columns on larger screens.

The media query changes the layout to a single column on smaller screens.

This is important for restaurant menus because many customers browse menus from mobile devices.

3. Adding JavaScript Filtering

Now we can make the category buttons interactive.

const filterButtons = document.querySelectorAll(".filters button");
const menuCards = document.querySelectorAll(".menu-card");

filterButtons.forEach(button => {

  button.addEventListener("click", () => {

    const category = button.dataset.category;

    menuCards.forEach(card => {

      if (category === "all" ||
          card.dataset.category === category) {

        card.style.display = "block";

      } else {

        card.style.display = "none";

      }

    });

  });

});

The script first selects all filter buttons and menu cards.

When a user clicks a button, JavaScript reads its data-category value.

The cards are then checked one by one.

If the category matches, the card remains visible. Otherwise, it is hidden.

4. Improving the Menu Card

A real restaurant menu can contain considerably more information than our basic example.

For example, you could add:

• Food images
• Ingredients
• Allergens
• Nutrition information
• Serving size
• Dietary information
• Customer ratings

You can also use separate category pages when the menu becomes large.

For example, a dedicated chicken menu page can make it easier for visitors who already know what type of food they want to order.

A useful example is the Applebee's chicken menu, where visitors can browse chicken-focused menu information:

https://applemenuhub.com/applebees-chicken-menu/

The same concept can be applied to appetizers, burgers, pasta, seafood, desserts, and other categories.

5. Making the Cards More Accessible

A restaurant menu should not only look good. It should also be easy to use.

Use semantic HTML where possible and make sure buttons have descriptive labels.

Images should also have meaningful alternative text.

For example:

<img
  src="chicken-dinner.jpg"
  alt="Grilled chicken dinner with vegetables">

Avoid using empty or generic alt text for important food images.

6. Final Result

With only HTML, CSS, and JavaScript, we have created a responsive restaurant menu interface.

The HTML provides the menu structure.

CSS creates the responsive layout.

JavaScript adds category filtering.

This approach is useful for restaurant websites, food blogs, recipe websites, and menu directories.

Conclusion

A restaurant menu does not need a complicated JavaScript framework.

For a basic menu interface, HTML, CSS, and vanilla JavaScript are enough.

Once the basic version works, you can extend it with search, sorting, nutrition information, images, modal windows, and other features.

The most important thing is to keep the menu easy to browse, especially on mobile devices.