Bootstrap Kayan Navigasyon Menüleri

Hazırlayan: Hakkı Tuçtan

Kayan Navigasyon Menüleri

Kayan Navigasyon Menüsü Nedir ?

İ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.

Peki Kayan Navigasyon Menüsü Nasıl Yapılır ?

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

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.

</button>

<a class="nav-link" href="#">Anasayfa</a>

</li>

<a class="nav-link" href="#">Hakkımızda</a>

</li>

<a class="nav-link" href="#">Hizmetlerimiz</a>

</li>

<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.

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.

Page updated

Report abuse