BootStrap .navbar Class'ı

Çoğu tasarımcı web sayfalarının en üstünde yatay bir menü çubuğu kullanır. Bu menüyü Css kullanarak istediğimiz görünümde hazırlayabiliriz. Ancak web sayfamızda istediğimiz esneklik ve mobil uyumluluğu sağlamak konusunda zorlanabiliriz.

İşte BootStrap'ın belki de bizlere sağladığı en önemli kolaylık navbar class'ıdır diyebiliriz. 

Adını "Navigation Bar" ifadesinin kısaltılmasından alan bu css sınıfını kullanarak kolayca yatay bir menü oluşturabilir, içerisine buton, link veya açılır menü şeklinde elemanlar yerleştirebiliriz. 

En önemlisi ise bu menü o anki ekran genişliğine otomatik uyum sağlayacak, istenirse xs ekranlarda açılır menü (collapse özelliği ile) haline gelecektir.

Konu örnekleri kısmında navbar da kullanılarak hazırlanmış basit bir web sayfası bulunmaktadır. Kendin Dene butonuna tıklayarak kodları inceleyebilir ve değişiklikler yaparak yeni halini görebilirsiniz.

Burada ise açıklama yapmak amacıyla şöyle bir menü örneği yazalım:

Başlangıç olarak bir nav (div de olur) etiketi açarak navbar ve navbar-default classlarını uyguluyoruz. Navbar-default açık gri bir görünüm kazandırmaktadır. İstenirse bunun yerine navbar-inverse sınıfı kullanılarak koyu bir görünüm elde edilebilir. Bu sınıflara kendi css kodlarımız ile farklı görünümler de kazandırabiliriz.

Ardından da bir container-fluid uygulanmış div açılıp, tüm menü elemanları bunun içine girecektir. 

Örnekteki menü, xs ekranlarda birleşerek açılır menü haline gelecek şekilde tasarlanmıştır. Kodlarını gördüğünüz buton xs ekranlarda ortaya çıkacak (daha büyük ekranlarda görünmeyecek) ve menünün açılıp kapanmasını sağlayacaktır. Data-target özelliğine verilen değer ile alt kısımdaki menü id'sinin eşleşmesine dikkat ediniz. Buton içindeki icon-bar sınıfı uygulanmış span etiketleri, alt alta 3 çizgi çıkmasını sağlamaktadır.

Butonun hemen altında navbar-brand uygulanmış bir a etiketi yer almaktadır. Genellikle site adı veya logosu konup ana sayfaya link verilir.

Buton ve navbar-brand kısımlarının, navbar-header ugulanan div içerisinde olduğunu fark etmişsinizdir. Navbar-brand elemanı tüm ekran genişliklerinde görünmeye, button.navbar-toggle ise sadece xs ekranlarda görünmeye ayarlıdır.

Ardından collapse özelliği uygulanmış bir div etiketi gelmektedir. İşte bu collapse class'ı, xs ekranlarda menünün açılır-kapanır hale gelmesini sağlamaktadır. Eğer bu özelliği kullanmak istemezsek, yani navbarımızın küçük ekranda da aynı görünmesini istersek, bu div'i açmadan direk ul etiketine geçebiliriz. Tabi bu durumda yukarıdaki butonu da kaldırmalıyız çünkü açılıp kapanacak bir menü olmayacağı için bir işe yaramayacaktır.

ul class="nav navbar-nav" içerisine metin görünümlü linklerimizi yerleştiririz. Bu elemanlardan birine active class'ı uygulayarak daha belirgin olmasını sağlayabiliriz, ya da active class'ı kullanmayabiliriz.

Ul etiketi bittiğinde örnek amaçlı bir buton görmektesiniz. Metin görünümlü linkler yerine ya da bunlara ek olarak butonlar da kullanabiliriz. Ayrıca şunu unutmayın ki, kendi css kodlarımızla normal linkleri de farklı görünümlere kavuşturabiliriz.

navbar-nav içindeki linkler menü içinde soldan başlayarak yerleşeceklerdir. Bazı elemanların sağ tarafa yerleşmesini istersek bunları ul class="nav navbar-nav navbar-right" içine yazabiliriz.

İşte bu kadar kolay. Bu örnekteki kodları kopyalayarak, istenilen elemanların sayısını artırabilir, istemediklerinizi kaldırabilir, bazılarına kendi css stillerinizi uygulayabilirsiniz. Böylece kendi menünüzü kolayca oluşturabilirsiniz. Hem de mobil uyumlu olacak şekilde.

KONU İLE İLGİLİ ÖRNEKLER