Bootstrap 4 Gelişmiş Navs

Bootstrap 4 Advanced navs bölümünde sayfa içi linkleri(çapa) kullanarak aynı sayfa içinde sekmeleri kullanarak faklı içerikleri görüntüleme konusunu anlatacağım.
Aşağıdaki örnekte bir tab menü görünmektedir.
İlk adımda normal tab menülerde olduğu gibi ul ve li etiketlerinden oluşan menü bölümü hazırlanır. Normal menüden farklı olarak a etiketlerine data-toggle="tab" parametre ve değerinin eklenmiş olmasıdır.
İçeriklerin gösterileceği bölümde ise tüm içerikleri kapsayan tab-content özelliğini almış bir adet div ve içerik sayısı kadar iç div elemanı bulunmalıdır.
İç div elemanlarının alması gereken en önemli class özelliği tab-pane özelliğidir. Bu özellik ve id değeri sayesinde menüdeki tıklama olayı bu divin içeriğini gösterir.
bir animasyon ile geçiş vermek için fade,
ilk durumda divi göstermek için show,
ilk durumda aktif divi göstermek için active,
class değerleri kullanılmaktadır.

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#anasayfa" >Anasayfa</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#hakkimizda">Hakkımızda</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#iletisim" >İletişim</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="anasayfa" > <h3>Anasayfa</h3> ..... </div> <div class="tab-pane fade" id="hakkimizda" > <h3>Hakkımızda</h3> ..... </div> <div class="tab-pane fade" id="iletisim" > <h3>İletişim</h3> ..... </div> </div>

Pill Menü

Tab menü için kullanılan kodların neredeyse tamamı pill menü için de geçerlidir.
Aralarındaki tek fark pill menü de data-toggle="tab" kodu yerine data-toggle="pill" değeri gelmelidir. Tabii bir de menü hazırlanırken ul etiketine nav-pills class özelliği verilmelidir.
Örnek: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#anasayfa" >Anasayfa</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#hakkimizda">Hakkımızda</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#iletisim" >İletişim</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="anasayfa" > <h3>Anasayfa</h3> ..... </div> <div class="tab-pane fade" id="hakkimizda" > <h3>Hakkımızda</h3> ..... <div class="tab-pane fade" id="iletisim" > <h3>İletişim</h3> ..... </div> </div>

Dikey Pill Menü (Vertical Pill Menü)

Pill menü örneğinde sadece ul HTML elemanına flex-column class özelliği eklenerek dikey bir pill menü oluşturulabilir.
Menünün dikey görünmesi için ul, li elemanlarının bulunduğu divin genişliği küçük bir divin içinde olması gerekir. Bu işlem için 3'e 9 bir ızgara yapısı yeterlidir.


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