Nasıl Yapılır? Basit Anlatım
Dikey açılır menüler, web sitelerinde gezinme menüsü olarak yaygın bir şekilde kullanılır. HTML ve CSS kullanarak basit bir dikey açılır menü oluşturmak oldukça kolaydır. İşte adım adım yapmanız gerekenler:
HTML yapısını oluşturun:
Dikey açılır menünün HTML yapısını oluşturmak için öncelikle bir div elemanı oluşturun ve içine bir ul elemanı ekleyin. Ardından, ul elemanının içine birkaç li elemanı ekleyin. Her li elemanı, dikey menüdeki bir gezinme bağlantısına karşılık gelir.
<div class=”vertical-menu”>
<ul>
<li><a href=”#”>Anasayfa</a></li>
<li><a href=”#”>Hakkımızda</a></li>
<li><a href=”#”>Hizmetlerimiz</a></li>
<li><a href=”#”>İletişim</a></li>
</ul>
</div>
CSS stilini tanımlayın:
HTML yapısını oluşturduktan sonra, CSS kullanarak stilini tanımlayabilirsiniz. İlk olarak, dikey menü elemanlarının stilini ayarlayın. Ardından, dikey menüdeki bağlantıların stilini ayarlayın. Son olarak, dikey menünün tamamının stilini ayarlayın.
/* Dikey menü elemanlarının stilini ayarlayın */
.vertical-menu {
width: 200px; /* menü genişliği */
}
/* Dikey menüdeki bağlantıların stilini ayarlayın */
.vertical-menu a {
background-color: #eee; /* arkaplan rengi */
color: black; /* metin rengi */
display: block; /* blok olarak görüntüle */
padding: 12px; /* iç boşluk */
text-decoration: none; /* alt çizgi yok */
}
/* Dikey menünün tamamının stilini ayarlayın */
.vertical-menu ul {
list-style-type: none; /* işaretlemeyi kaldır */
margin: 0; /* kenar boşluğunu sıfırla */
padding: 0; /* iç boşluğu sıfırla */}
Dikey menünün etkinleştirilmesi:
Son olarak, dikey menüyü etkinleştirmek için JavaScript kullanabilirsiniz. Dikey menünün açılıp kapanmasını sağlamak için bir toggle fonksiyonu oluşturun ve ardından bir düğme veya başka bir elemanla tetikleyin. İşte örnek bir toggle fonksiyonu:
javascript
function toggleMenu() {
var menu = document.querySelector(“.vertical-menu ul”);
menu.classList.toggle(“show”);
}
Ve işte dikey menüyü tetikleyen örnek bir düğme:
html
<button onclick=”toggleMenu()”>Menüyü Göster/Gizle</button>
Bu kadar!