Hiyerarşi ve Durumlar
Bir navigasyon menüsünde başarılı bir kullanıcı deneyimi için Görsel Hiyerarşi ve Durum (State) Yönetimi kritik önem taşır.
1. Görsel Hiyerarşi
Navbar içindeki öğeler önem sırasına göre dizilmelidir:
- Logo: Marka kimliği için en solda ve en belirgin.
- CTA (Call to Action) Butonu: Kullanıcının yapmasını istediğiniz ana aksiyon (İletişim, Kayıt vb.). En sağda ve en parlak renkli.
- Linkler: İkincil navigasyon. Hover ve Active durumlarıyla etkileşim sağlar.
Yapısal Kod Örneği
<!-- HTML Hiyerarşisi -->
<nav class="navbar">
<div class="logo">...</div> <!-- Hiyerarşi 1 -->
<ul class="nav-links"> <!-- Hiyerarşi 3 -->
<li><a href="#" class="active">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>
<a href="#" class="nav-btn">Teklif Al</a> <!-- Hiyerarşi 2 -->
</nav>
Durumlar (States): Kullanıcı menüyle etkileşime girdiğinde linklerin Hover (üzerine gelme), Active (seçili olma) ve Passive (boşta durma) durumları arasında net bir görsel fark olmalıdır.
1. Aktif ve Pasif Durumlar
Geçerli sayfayı belirtmek için .active sınıfını kullanırız. Bu sınıf, hover etkisinin kalıcı halidir.
/* CSS */
.nav-link.active {
color: var(--primary);
}
.nav-link.active::after {
width: 100%; /* Çizgiyi kalıcı yap */
}
Otomatik Aktif Sınıfı Ekleme (PHP Örneği)
Sayfa ismine bakarak otomatik olarak active sınıfı ekleyebilirsiniz.
<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'index.php') ? 'active' : ''; ?>" href="index.php">Ana Sayfa</a>
</li>
2. Alt Çizgi Animasyonu (Underline Slide)
Metnin altından kayarak çıkan çizgi efekti, ::after pseudo element’i ile yapılır. Genişlik değeri (width) 0'dan 100%'e geçiş yapar.
.nav-link::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 2px;
background: #0085FE;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
3. Buton ve İkon Entegrasyonu
Navbar'ın sağ tarafına bir aksiyon butonu (CTA) eklemek, dönüşüm oranlarını artırır. Bu butonlar diğer linklerden farklılaşmalı ve mutlaka bir hover animasyonuna sahip olmalıdır.
.nav-btn:hover {
transform: scale(1.05); /* Yumuşak büyüme */
background: #0056b3;
}