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