Restaurant Menu Website Template

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Wandering Wok</title>
    <style>
        /* --- CSS --- */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }

header {
            background-color: #e91e63; /* Vibrant Pink */
            color: #fff;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

header h1 {
            margin: 0;
            font-size: 3em;
            font-family: 'Cursive', fantasy; /* Added a more playful font */
        }

header p {
            font-size: 1.2em;
            margin-top: 5px;
        }

#menu {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

.menu-section {
            margin-bottom: 30px;
        }

.menu-section h2 {
            color: #e91e63;
            border-bottom: 2px solid #e91e63;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

.menu-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* Align to top */
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ddd;
        }

.menu-item:last-child {
            border-bottom: none; /* Remove border from the last item */
        }

.item-name {
            font-weight: bold;
            flex: 1; /* Takes up available space */
        }

.item-description {
          font-style: italic;
          color: #666;
          flex: 2; /* Takes up more space */
          margin-left: 20px; /* Add space between name/price and description */
          margin-right: 20px;
        }

.item-price {
            color: #e91e63;
            font-weight: bold;
            white-space: nowrap; /* Prevent price from wrapping */
        }

.special-badge {
            background-color: #ffd700; /* Gold */
            color: #333;
            padding: 2px 5px;
            border-radius: 3px;
            font-size: 0.8em;
            margin-left: 5px;
        }

footer {
            text-align: center;
            padding: 20px 0;
            background-color: #333;
            color: #fff;
        }

/* --- Responsive Design --- */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2.5em;
            }

#menu {
                padding: 10px;
            }

.menu-item {
                flex-direction: column; /* Stack items vertically */
                align-items: stretch;  /* Full width */
            }

.item-description {
               margin-left: 0;
               margin-top: 5px; /* Add space above description */
               margin-right: 0;

}
            .item-price {
                margin-top: 5px;
            }
        }

/* --- JavaScript Animation --- */
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

.fadeIn {
            animation-name: fadeIn;
        }
    </style>
</head>
<body>
    <header>
        <h1>The Wandering Wok</h1>
        <p>A Culinary Journey Through Asia</p>
    </header>

<div id="menu">
        <section class="menu-section animated fadeIn">
            <h2>Appetizers</h2>
            <div class="menu-item">
                <span class="item-name">Spring Rolls (2)<span class="special-badge">Vegetarian</span></span>
                <span class="item-description">Crispy rolls filled with fresh vegetables and served with sweet chili sauce.</span>
                <span class="item-price">$5.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Gyoza (6)</span>
                <span class="item-description">Pan-fried pork dumplings, served with a soy-ginger dipping sauce.</span>
                <span class="item-price">$7.99</span>
            </div>
             <div class="menu-item">
                <span class="item-name">Edamame</span>
                <span class="item-description">Steamed and lightly salted soybean pods.</span>
                <span class="item-price">$4.99</span>
            </div>
        </section>

<section class="menu-section animated fadeIn">
            <h2>Main Courses</h2>
            <div class="menu-item">
                <span class="item-name">Pad Thai<span class="special-badge">Popular</span></span>
                <span class="item-description">Stir-fried rice noodles with shrimp, chicken, tofu, peanuts, and bean sprouts in a tamarind sauce.</span>
                <span class="item-price">$12.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Kung Pao Chicken</span>
                <span class="item-description">Spicy stir-fried chicken with peanuts, vegetables, and chili peppers.</span>
                <span class="item-price">$13.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Teriyaki Salmon</span>
                <span class="item-description">Grilled salmon fillet glazed with teriyaki sauce, served with steamed rice and vegetables.</span>
                <span class="item-price">$16.99</span>
            </div>
            <div class="menu-item">
                <span class="item-name">Vegetable Stir-Fry</span>
                <span class="item-description"> A medley of fresh seasonal vegetables wok-tossed in a light garlic sauce.  Served with steamed rice.</span>
                <span class="item-price">$10.99</span>
            </div>

</section>

<section class="menu-section animated fadeIn">
            <h2>Desserts</h2>
            <div class="menu-item">
                <span class="item-name">Mango Sticky Rice</span>
                <span class="item-description">Sweet sticky rice topped with fresh mango slices and coconut milk.</span>
                <span class="item-price">$6.99</span>
            </div>
              <div class="menu-item">
                <span class="item-name">Mochi Ice Cream (2)</span>
                <span class="item-description">Choose from a variety of flavors:  Green Tea, Mango, Strawberry, Chocolate.</span>
                <span class="item-price">$5.99</span>
            </div>
        </section>

<section class="menu-section animated fadeIn">
            <h2>Drinks</h2>
            <div class="menu-item">
                <span class="item-name">Thai Iced Tea</span>
                <span class="item-description">Sweet and creamy Thai tea with milk.</span>
                <span class="item-price">$3.99</span>
            </div>
              <div class="menu-item">
                <span class="item-name">Sake (Small Carafe)</span>
                <span class="item-description">Traditional Japanese rice wine.  Served warm or chilled.</span>
                <span class="item-price">$8.99</span>
            </div>
             <div class="menu-item">
                <span class="item-name">Soft Drinks</span>
                <span class="item-description">Coke, Diet Coke, Sprite, Ginger Ale.</span>
                <span class="item-price">$2.50</span>
            </div>
        </section>
    </div>

// Example:  Add a click handler to menu items (could show an alert, or expand details, etc.)
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // alert(`You clicked on ${item.querySelector('.item-name').textContent}`); // Simple example

// More complex example (toggle description visibility):
                    const description = item.querySelector('.item-description');
                    if (description) { // Check if description exists.
                      if (description.style.display === 'none' || description.style.display === '') {
                            description.style.display = 'block';
                        } else {
                            description.style.display = 'none';
                        }
                    }

});
            });
        });
    </script>
</body>
</html>

Restaurant Menu Website Template

Recommended

Simple CSS Card Template

HTML Dropdown Menu Code Snippet

Restaurant Menu Website HTML CSS

HTML

CSS

JS

Recommended

Simple CSS Card Template

HTML Dropdown Menu Code Snippet

Restaurant Menu Website HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS