Yemek Menüsü Hazırlanması

26-10-2023, 16:53:52

Merhaba,

Bir site için, yemek menülerinin, burada https://prnt.sc/wZO7x12g-Sqb gibi açılır kapanır, şekilde olmasını istiyoruz.

Mobil ve masaüstü uyum olarak, söylediğim şekilde menüyü ayarlayacak birisini arıyoruz. Var olan yemek menüsünü, hazırlayıp bu şekilde açılmasını sağlayacak. İstediğiniz ücretle beraber bilgi verirseniz sevinirim.

Düzenleme: İş verilmiştir, teşekkür ederim, ilginiz için.

26-10-2023, 17:03:14

#2

Saitama

Kişisel Rütbe

Html olarak arıyorsanız bu şekilde olur

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restoran Menüsü</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu-button {
            display: block;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            margin: 10px;
            border: none;
            cursor: pointer;
        }
        .menu-content {
            display: none;
            padding: 10px;
        }
        .menu-content ul {
            list-style: none;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>Restoran Menüsü</h1>
    <button class="menu-button" onclick="toggleMenu('kahvalti')">Kahvaltı</button>
    <div class="menu-content" id="kahvalti">
        <ul>
            <li>Menemen</li>
            <li>Simit</li>
            <li>Kızarmış Ekmek</li>
            <!-- Diğer kahvaltı çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('ara_sicak')">Ara Sıcak</button>
    <div class="menu-content" id="ara_sicak">
        <ul>
            <li>Mercimek Çorbası</li>
            <li>İşkembe Çorbası</li>
            <li>Domates Çorbası</li>
            <!-- Diğer ara sıcak çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('aksam_yemegi')">Akşam Yemeği</button>
    <div class="menu-content" id="aksam_yemegi">
        <ul>
            <li>Izgara Köfte</li>
            <li>Tavuk Şiş</li>
            <li>Etli Kebap</li>
            <!-- Diğer akşam yemeği çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('kebap')">Kebap Çeşitleri</button>
    <div class="menu-content" id="kebap">
        <ul>
            <li>Adana Kebap</li>
            <li>Urfa Kebap</li>
            <li>Ali Nazik Kebap</li>
            <!-- Diğer kebap çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <script>
        function toggleMenu(menuId) {
            var menu = document.getElementById(menuId);
            if (menu.style.display === "block") {
                menu.style.display = "none";
            } else {
                menu.style.display = "block";
            }
        }
    </script>
</body>
</html>

wordpress olarak arıyorsanız elementor tarzı bir eklenti ile ayarlanır

26-10-2023, 17:06:21

#3

y6lm0z

Saitama adlı üyeden alıntı: mesajı görüntüle

Html olarak arıyorsanız bu şekilde olur

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restoran Menüsü</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .menu-button {
            display: block;
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            margin: 10px;
            border: none;
            cursor: pointer;
        }
        .menu-content {
            display: none;
            padding: 10px;
        }
        .menu-content ul {
            list-style: none;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>Restoran Menüsü</h1>
    <button class="menu-button" onclick="toggleMenu('kahvalti')">Kahvaltı</button>
    <div class="menu-content" id="kahvalti">
        <ul>
            <li>Menemen</li>
            <li>Simit</li>
            <li>Kızarmış Ekmek</li>
            <!-- Diğer kahvaltı çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('ara_sicak')">Ara Sıcak</button>
    <div class="menu-content" id="ara_sicak">
        <ul>
            <li>Mercimek Çorbası</li>
            <li>İşkembe Çorbası</li>
            <li>Domates Çorbası</li>
            <!-- Diğer ara sıcak çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('aksam_yemegi')">Akşam Yemeği</button>
    <div class="menu-content" id="aksam_yemegi">
        <ul>
            <li>Izgara Köfte</li>
            <li>Tavuk Şiş</li>
            <li>Etli Kebap</li>
            <!-- Diğer akşam yemeği çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <button class="menu-button" onclick="toggleMenu('kebap')">Kebap Çeşitleri</button>
    <div class="menu-content" id="kebap">
        <ul>
            <li>Adana Kebap</li>
            <li>Urfa Kebap</li>
            <li>Ali Nazik Kebap</li>
            <!-- Diğer kebap çeşitlerini buraya ekleyebilirsiniz -->
        </ul>
    </div>

    <script>
        function toggleMenu(menuId) {
            var menu = document.getElementById(menuId);
            if (menu.style.display === "block") {
                menu.style.display = "none";
            } else {
                menu.style.display = "block";
            }
        }
    </script>
</body>
</html>

wordpress olarak arıyorsanız elementor tarzı bir eklenti ile ayarlanır

Teşekür ederim hocam, siteler wordpress

26-10-2023, 17:07:06

#4

Saitama

Kişisel Rütbe

y6lm0z adlı üyeden alıntı: mesajı görüntüle

Teşekür ederim hocam, siteler wordpress

o zaman elementorda sayfayı düzenle de orada buton ekleyerek açılır kapanır buton ile çözülür

26-10-2023, 17:09:24

#5

Fleion

Selamlar.

Yemek menüsü için dilerseniz Arayüz tasarımı , koda dökümü ve entegresini yapabiliriz.