<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kod Blogu</title>
<style>
/* Menü butonunun görünümü */
.menu-btn {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
cursor: pointer;
font-size: 18px;
width: 100%;
}
/* Menü öğelerinin başlangıçta gizlenmesi */
.nav-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
background-color: #333;
}
/* Menü öğelerinin düzeni */
.nav-menu a {
display: block;
padding: 12px;
color: white;
text-decoration: none;
border-top: 1px solid #fff;
}
/* Menü öğelerine hover efekti */
.nav-menu a:hover {
background-color: #555;
}
</style>
</head>
<body>
<!-- Menü butonu -->
<div class="menu-btn" onclick="toggleMenu()">Menüyü Göster</div>
<!-- Menü -->
<nav>
<ul class="nav-menu">
<li><a href="https://www.google.com">Menü 1</a></li>
<li><a href="https://www.google.com">Menü 2</a></li>
<li><a href="https://www.google.com">Menü 3</a></li>
<li><a href="https://www.google.com">Menü 4</a></li>
</ul>
</nav>
<script>
// Menü açma/kapama fonksiyonu
function toggleMenu() {
var menu = document.querySelector('.nav-menu');
// Menüyü göster ya da gizle
if (menu.style.display === 'none' || menu.style.display === '') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
}
</script>
</body>
</html>