Bootstrap 4 Menü Çubuğu (Navbar)

Bootstrap4 Menü Çubuğu (Navbar)

Bootstrap4 menü çubuğu(navbar) site içindeki sayfalar arasındaki gezinmeyi sağlarlar. Her ne kadar gezinme işlemi dropdown kullanılarak yapılsa da navbar görsel açıdan çok daha uygundur.
Ayrıca navbar sahip olduğu collapse işlemi küçük ekran boyutlarında çok farklı bir menü görünümü ortaya sunar. Bootstrap'ın ilk çıktığı günden beri kullanıcıların en çok beğendiği özelliği de bu collapsible(kapanıp açılabilir) menüsü olmuştur.
Bootstrap yeni sürümüyle beraber navbar yapısında da bazı değişiklikler olmuştur. Önceki sürümlerinde tüm menüler ul ve li elemanlarından oluşan listeler ile hazırlanırken, bu sürümünde açılır menüler div elemanları kullanılarak hazırlanmıştır. Bu da back-end kodlar kullanılarak menü yapımında sorunlara yol açabilir.
Basit bir navbar oluşturmak için gerekli kodlar aşağıda verilmiştir. <nav class="navbar navbar-expand-lg navbar-dark bg-dark my-4"> <a class="navbar-brand" href="#">Navbar Örnek</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_icerik" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar_icerik"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Anasayfa (aktif)<span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"> Açılır Menü </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Alt Menü 1</a> <a class="dropdown-item" href="#">Alt Menü 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Ayrılmış Alt Menü </a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">İletişim</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Ara</button> </form> </div> </nav> Yukarıdaki kod incelendiğinde ilk karşımıza çıkan etiket nav etiketidir. Bu etiket yeni gelen HTML5 etiketlerindendir. Temelde div etiketi gibi çalışır ancak sitelerin menüsü genel olarak bu etiket kullanılarak oluşturulur. Böylece arama motorlarının sitenin menüsüne ulaşması kolaylaştırılmış olur. Yine de menümüzü div etiketi kullanarak yapmak istersek role="navigation" kodunu div içine eklememiz yeterli olacaktır.
nav etiketi navbar navbar-expand-lg navbar-dark ng-dark özellikleri alır.
navbar ve navbar-expand-lg menümüzün collapse özelliği ile ilgilidir.
navbar-dark ve bg-dark ise arka plan rengi ve yazı rengi özellikleri ile ilgidir.
navbar-dark özelliğinin dışında navbar*light özelliği ile yazı renk koyu yapılabilir.
navbar-brand bölümüne firma logosu veya firma adı eklenebilir.
Bu bölümün hemen altına kalan buton ise menümüz küçüldüğünde ortaya çıkan butondur.Görüldüğü gibi bu butonun data-target="#navbar_icerik" kısmı menümüzü işaret eder ve tıklandığında menü aşağıya doğru açılır.
Gelelim menümüze en dışta bulunan div elemanı collapse navbar-collapse sınıf özelliğini alır. Böylece kapanıp açılabilir.
div elemanının altında navbar-nav özelliğine sahip bir ul elemanı bulunur.
Her li elemanı için nav-item ve li içindeki her a elemanı için nav-link class özellikleri verilmiştir. Ayrıca aktif link için active ve engellenmiş link için disable özellikleri verilebilir.
Navbar içerisinde açılır menü kullanılacak ise açılacak li elemanına dropdown özelliği eklenir ve yukarıda görüldüğü gibi açılır menü oluşturulabilir.
Menüde bulunan yazıların renkleri için iki adet class özelliği bulunmaktadır.Bunlar,
açık renkli yazılar için navbar-dark,
koyu renkli yazılar için navbar-light,
özelliği verilmelidir.

Bootstrap için kullanılan hazır renkler menülere de uygulanabilirler.
Örnek: <nav class="navbar navbar-expand-lg navbar-light bg-info">

Menü Konumlandırma

Menü çubuğumuzun konumunu class özelliği kullanarak belirleyebiliriz. Konumlandırma işlemi yapmak için en dışta bulunan div veya nav elamanlarına konum özellikleri eklenmelidir.
Eklebilecek konum özellikleri şunlardır.
Sayfanın üstüne sabitlemek için fixed-top,
Sayfanın altına sabitlemek için fixed-bottom,
Önce bağımsız ve scroll işlemi ile sayfa üstüne geldiğinde yapışan menü için (sticky özelliği) için sticky-top
özellikleri verilebilir.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com