Hazırlayan: Hakkı Tuçtan
Kayan Navigasyon Menüleri
İngilizcesi Floating (Kayan, Yüzen) Navigation Bar ya da Sticky (Yapışkan) Navigation Bar olarak geçer. Websitesini aşağı doğru kaydırırken navigasyon menüsünün yukarıda veya yan tarafta sabit olarak kalmasıdır.
Bu sitenin üst ve sol tarafta iki tane menü bulunmaktadır. Kayan bir navigasyon menüsüne örnektir.
Not: Bootstrap kullanırken https://getbootstrap.com/ resmi sitesinden yararlanılmıştır.
İlk olarak bootstrap kütüphanesinden yararlanmak için sayfanıza ekleyin. Yapmak için ise '<head>' etiketi arasına
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
kodu ekliyoruz. Bunun sayesinde kütüphaneye erişiminiz sağlanıyor.
İkinci olarak HTML kodunuzda,bir '<nav>' etiketi oluşturun ve içine navigasyon elemanlarını ekleyin.
Örnek bir navbar oluşturalım.
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Anasayfa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hakkımızda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hizmetlerimiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İletişim</a>
</li>
</ul>
</div>
</nav>
'navbar' sınıfı, Bootstrap'ta kullanılan varsayılan bir navigasyon stili için gereklidir.
'navbar-expand-lg' sınıfı, nav menüsünün ekran genişliğinin belirli bir noktaya kadar genişlemesini sağlar.
'bg-dark' sınıfı, nav menüsünün arka plan rengini belirler.
'sticky-top'sınıfı, navigasyon menüsünün üst kısımda sabit kalmasını sağlar.
Örnek olarak oluşturulan navbar bu şekilde gözükmektedir.
En son olarak bize JavaScript kodları gereklidir. Aşağıdaki kodları sayfanızda '<head>' etiketi arasına ekleyiniz.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
En son olarak 'body' kısmına sitenin aşağıya doğru kayması için metin ekliyoruz. Ve artık bir kayan navigasyon menü elde etmiş oluyoruz.