Altın Konu Hoverable Sidenav Nasıl Oluşturulur?

GUNNERIUS · 21 Şub 2024

Merhaba Değerli Turkmmo Üyeleri,

Bu rehberimizde, web sitenizde hoverable (üzerine gelindiğinde görünen) bir yan gezinme menüsü nasıl oluşturulacağını adım adım öğreneceğiz. Hoverable sidenav, Turkmmo forumunda ziyaretçilerinizin kolayca gezinebilmesini ve istedikleri içeriği hızlıca bulabilmesini sağlayan kullanışlı bir özelliktir.

1. Adım: HTML Yapısını Oluşturma

İlk olarak, hoverable sidenav menüsünün HTML yapısını oluşturmalısınız. Bu, genellikle bir <nav> elementi içinde bir liste (<ul>) ve bağlantılar (<li> ve <a>) şeklinde olur. Örneğin:

[CODE lang="html" title="html"]<nav class="yan-menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li class="dropdown">
<a href="#">Hakkımızda</a>
<div class="dropdown-menu">
<a href="#">Misyonumuz</a>
<a href="#">Vizyonumuz</a>
<a href="#">Tarihçe</a>
</div>
</li>
<li><a href="#">Hizmetlerimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>[/CODE]

Bu HTML kodu, hoverable sidenav menüsünü oluşturur ve alt menüler için bir dropdown yapısı sağlar.

2. Adım: CSS ile Tasarımı Düzenleme

CSS kullanarak sidenav menüsünün tasarımını düzenlemek, menünün görsel olarak kullanıcı dostu ve hoş görünmesini sağlar. Ayrıca, hoverable özelliğini eklemek için bazı stil değişiklikleri yapmanız gerekebilir. Örneğin:

[CODE lang="css" title="css"].yan-menu {
width: 250px; /* Menü genişliği */
background-color: #333; /* Arka plan rengi */
}

.yan-menu ul {
list-style-type: none;
padding: 0;
}

.yan-menu ul#333{
padding: 10px;
position: relative; /* Dropdown menüyü konumlandırmak için */
}

.yan-menu ul li a {
color: #fff; /* Bağlantı rengi */
text-decoration: none;
}

.dropdown-menu {
display: none; /* Başlangıçta #fffdown menüyü gizle */
position: absolute;
top: 0;
left: 100%; /* Yan menünün sağında konumlandır */
background-color: #555; /* Arka plan rengi */
}

.dropdown:hover .dropdown-menu {
display: block; /* Üzerine gelindiğinde dropdown #555yü göster */
}[/CODE]

Bu CSS kodu, sidenav menüsünün görünümünü özelleştirir ve hoverable özelliğini ekler.

3. Adım: JavaScript ile İşlevsellik Ekleme (isteğe bağlı)

İsteğe bağlı olarak, JavaScript kullanarak sidenav menüsüne ek işlevsellikler ekleyebilirsiniz. Örneğin, mobil cihazlarda menünün otomatik olarak açılıp kapanmasını sağlayabilirsiniz.

4. Adım: Kullanıcı Deneyimini İyileştirme

Son adımda, kullanıcıların hoverable sidenav menüsünü nasıl kullanacaklarını ve içeriklere nasıl erişeceklerini anlamalarına yardımcı olmalısınız. Kullanıcıların menüyü gezinirken rahat etmelerini sağlayın.

Bu rehberde, Turkmmo forumunda hoverable sidenav menüsü nasıl oluşturulacağını adım adım öğrendik. Bu teknik, forum ziyaretçilerinizin gezinme deneyimini geliştirecek ve istedikleri içeriği daha hızlı bulmalarını sağlayacaktır.

Umarım bu rehber, sidenav menüsü oluşturmak isteyen Turkmmo üyelerine yardımcı olur. Başka sorularınız varsa, çekinmeden sormaktan çekinmeyin!

İyi kodlamalar dilerim!