Tüm html sayfalarına tek bir yerden komut verebilen bir menu bloğu yapmak
<div id="menuContainer"></div>
JavaScript ile Menü Oluşturma:
JavaScript dosyasında menüyü oluşturun. Menülerin yan yana dizilmesi ve alt menülerin eklenmesi için gerekli kodları ekleyin.
CSS ile Görünümü Ayarlama:document.addEventListener("DOMContentLoaded", function () {
var menuContainer = document.getElementById("menuContainer");
// Menü içeriğini belirleme
menuContainer.innerHTML = `
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li class="submenu"><a href="#">Hakkımızda</a>
<div class="submenu-content">
<a href="#">Misyonumuz</a>
<a href="#">Vizyonumuz</a>
</div>
</li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
`;
});
Menü ve alt menülerin görünümünü CSS ile ayarlayın. Bu, menülerin yan yana dizilmesi ve alt menülerin gizlenmesi veya görünür hale getirilmesini sağlar.
HTML Dosyalarına Menüyü Çağırma:#menuContainer nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#menuContainer nav ul li {
display: inline-block;
margin-right: 10px; /* İstediğiniz boşluk değeri */
position: relative; /* Alt menülerin konumlandırılması için */
}
#menuContainer nav ul li ul {
display: none; /* Alt menüleri varsayılan olarak gizle */
position: absolute; /* Ana menü üzerine çıkacak şekilde konumlandır */
top: 100%; /* Ana menünün altında görünmesini sağlar */
left: 0;
}
#menuContainer nav ul li:hover ul {
display: block; /* Fare üzerine gelindiğinde alt menüyü göster */
}
#menuContainer nav ul ul li {
display: block;
}
HTML dosyalarınızda menüyü çağırmak için <script> etiketini kullanın ve JavaScript dosyasını belirtin.
<script src="menu.js"></script>
HTML dosyanızda stil dosyasını <head> bölümünde şu şekilde bağlayabilirsiniz:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="menuContainer"></div> <script src="script.js"></script> </body> </html>