Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Widget</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: #1a1a1a;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column;
            padding: 0;
        }
        .menu-container {
            padding: 16px;
            background: #333333;
            box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
            border-radius: 16px;
            width: 100%;
            max-width: 1200px;
            text-align: center;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 80%;
        }
        .menu-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            overflow-x: auto;
            flex-grow: 1;
        }
        .menu-buttons button {
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            background: #555555;
            color: white;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 14px;
        }
        .menu-buttons button:hover, .menu-buttons button.active {
            background: #777777;
        }
        .menu-content {
            text-align: left;
            overflow-y: auto;
            max-height: 60vh;
            padding: 10px;
            flex-grow: 1;
        }
        h2 {
            color: #e63946;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: 600;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #4a4a4a;
            padding: 10px 15px;
            border-radius: 8px;
            transition: 0.3s;
        }
        li:hover {
            background: #666666;
        }
        .dropdown {
            display: none;
            background-color: #333333;
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
        }
        .dropdown button {
            display: block;
            width: 100%;
            padding: 10px 15px;
            background-color: #555555;
            color: white;
            text-align: left;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
        .dropdown button:hover {
            background: #777777;
        }
        @media (max-width: 768px) {
            .menu-buttons {
                display: none;
            }
            .dropdown {
                display: block;
            }
            h2 {
                font-size: 20px;
            }
            li {
                font-size: 14px;
            }
        }
        @media (min-width: 769px) {
            .dropdown {
                display: block;
            }
            .menu-buttons {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <div class="dropdown" id="dropdown-menu">
            <button onclick="toggleDropdown()">Select Category</button>
            <div id="dropdown-list" style="display: none;"></div>
        </div>

        <div class="menu-content">
            <h2 id="menu-title">Breakfast</h2>
            <ul id="menu-items"></ul>
        </div>
    </div>

    <script>
        const menuData = {
            "Breakfast": [
                "Toast au Saumon ou Jambon - 7000 XOF",
                "Full English Breakfast - 8000 XOF",
                "Huevos Rancheros - 7000 XOF",
                "Egg Benedict - 6000 XOF",
                "Pancakes ou French Toast - 4000 XOF",
                "Egg Mayo Sandwich - 5000 XOF",
                "Mixed Omelet - 4000 XOF"
            ],
            "Tapas": [
                "Chicken Finger - 6000 XOF",
                "Chicken Wings - 5000 XOF",
                "Nachos - 7000 XOF"
            ],
            "Salads": [
                "Cesar Salad - 6000 XOF",
                "Salad Nicoise - 5000 XOF",
                "Burrata - 7000 XOF",
                "Mexican Fiesta Salad - 7000 XOF"
            ],
            "Sandwiches": [
                "Club Sandwich - 7000 XOF",
                "Sandwich au poulet/Thon/Jambon de Boeuf - 5000 XOF",
                "Philadelphia Cheese Steak Sandwich - 7000 XOF"
            ],
            "Burger": [
                "Classic Burger - 7000 XOF",
                "Buffalo Mozzarella - 8000 XOF",
                "American Burger - 8000 XOF",
                "Humpty Dumpty - 9000 XOF",
                "Chicken Burger - 7000 XOF"
            ],
            "Mexican": [
                "Taco poulet ou boeuf - 7000 XOF",
                "Burrito poulet ou boeuf - 7000 XOF",
                "Chimichanga - 7500 XOF",
                "Taquitos - 8000 XOF",
                "Mac and Cheese con Chilli con Carne - 8000 XOF"
            ],
            "Coffee/Tea": [
                "Espresso - 1500 XOF",
                "Macchiato - 2000 XOF",
                "Cappuccino - 2000 XOF",
                "Americano - 2000 XOF",
                "Latte - 3000 XOF",
                "Mocha - 3000 XOF",
                "Ice Latte - 3500 XOF",
                "Ice Latte Caramel/Chocolate - 4000 XOF",
                "Frappe Vanilla/Chocolate/Cafe - 3500 XOF",
 "Strawberry Shake - 3500 XOF",
                "Cold Foam Latte - 4000 XOF",
                "The Infusion - 2000 XOF",
                "The Infusion canelle - 2500 XOF",
                "Ice Tea Passion Fruit/Mango - 3000 XOF"
            ],
            "Soda/Cocktails": [
                "Coca Cola - 1000 XOF",
                "Fanta - 1000 XOF",
                "Sprite - 1000 XOF",
                "Perrier - 1500 XOF",
                "Eau - 500 XOF",
                "Virgin Mojito - 4500 XOF",
                "Pina Colada - 4500 XOF",
                "Blue Paradise - 4500 XOF"
            ],
            "Desserts": [
                "San Sebastian Cheesecake Chocolate ou Framboise Sauce - 5000 XOF",
                "Biscof Cheesecake - 5000 XOF",
                "Oreo Cheesecake - 5000 XOF",
                "Brownie Cheesecake - 5000 XOF",
                "Lemon Cheesecake - 5000 XOF",
                "Brownie - 3000 XOF",
                "Tart au pomme - 2000 XOF",
                "Tart au mix fruit - 2500 XOF",
                "Éclair - 2000 XOF"
            ],
            "Fresh Juice": [
                "Eleven Juice (Pomme, Orange, Carrot) - 3500 XOF",
                "Pick Me Up (Framboise, Pomme, Banane) - 3500 XOF",
                "ABC Juice (Orange, Carotte, Gingembre) - 3500 XOF",
                "Recovery Juice (Pomme, Concombre, Citron, Gingembre) - 3500 XOF",
                "Daily Juice (Orange, Pomme, Banane) - 3500 XOF",
                "Iron Man (Ananas, Epinard, Pomme) - 3500 XOF",
                "Ginger Sensation (Gingembre, Citron, Miel, Pomme) - 3500 XOF",
                "Femme Fatale (Orange, Carotte, Betterave, Sel) - 3500 XOF"
            ]
        };

        const menuTitle = document.getElementById("menu-title");
        const menuItemsList = document.getElementById("menu-items");
        const dropdownList = document.getElementById("dropdown-list");

        function toggleDropdown() { dropdownList.style.display = dropdownList.style.display === "none" ? "block" : "none"; }

        function updateMenu(category) { menuTitle.textContent = category; menuItemsList.innerHTML = menuData[category].map(item => `<li>${item}</li>`).join(''); }

        Object.keys(menuData).forEach(category => {
            const button = document.createElement("button");
            button.textContent = category;
            button.onclick = () => { updateMenu(category); toggleDropdown(); };
            dropdownList.appendChild(button);
        });

        updateMenu("Breakfast");
    </script>
</body>
</html>


Breakfast

Instagram