Teknoloji Yazılım

Bottom Navbar Nedir? HTML–CSS ile Hızlı Bir Proje Deneyimi

Bottom navbar, Türkçesiyle Alt Navigasyon Çubuğu, özellikle mobil arayüzlerde tercih edilen, 4–5 farklı sayfaya yönlendirme sunan pratik bir menü yapısıdır. Bu proje, JavaScript çalışma sürecimdeki ikinci çalışmam oldu. Açıkçası projeyi önceden incelemiş olsaydım muhtemelen başlamazdım; çünkü düşündüğüm kadar yoğun JavaScript içermiyordu. Yine de CSS pratiği açısından oldukça hızlı ve faydalı bir deneyim oldu.

Bu yazıda hem projeden bahsediyor hem de HTML, CSS ve JS tarafında kullandığım yapıları açıklıyorum.

⭐ Bottom Navbar Yapısı Nasıl Çalışıyor?

Hazırladığım versiyon, bir blog hesabının şu sayfalarından oluşuyor:

  • Anasayfa
  • Ürünler
  • İletişim
  • Blog

Menü tamamen mobil uyumlu olacak şekilde tasarlandı ve her sekmeye tıklandığında ilgili sayfa görünür hâle geliyor.

🧱 HTML Yapısı

Projede önce tüm alanı kapsayacak bir container tanımladım.
Bu container içinde alt navigasyonun bulunduğu bir card bölümü var. Bu card, tüm menüyü kapsıyor.

Her sayfa için aynı temel class yapısını kullandım:

  • Ortak stil için: content
  • Sayfaları özelleştirmek için ek class: content home, content product, content blog gibi.

Sayfa değişimlerinin düzenli olması için üst ve alt class yapılarını doğru planlamak önemliydi.

🔸 İkon Kullanımı

İkonları FontAwesome üzerinden çektim. Projede önce FontAwesome CDN bağlantısını ekledim, ardından istediğim ikonları HTML içinde <i> etiketiyle yerleştirdim.

FontAwesome, ücretsiz ve kaliteli ikonlar sunması nedeniyle bu tarz menüler için oldukça ideal.

🎨 CSS Yapısı

CSS tarafında en kritik konu, sayfaların görünürlük durumlarıydı.

Bir sekmeye tıklandığında ilgili sayfanın öne gelmesi, diğerlerinin ise geri planda kalması için:

  • .active classı ile görünür sayfayı belirledim.
  • opacity kullanarak görünmez–görünür geçişleri sağladım.
  • Katman düzeni için z-index değerleriyle oynadım.

📌 Öğrendiğim Yeni Özellik: position

Bu projede özellikle position özelliğini daha iyi kavradım.
Her bir position türünün nasıl davrandığını tabloya döktüm ve projede nerede kullanabileceğimi görmek işimi kolaylaştırdı.

🍽️ Tasarımı Kişiselleştirme Süreci

Projeyi takip ettiğim kaynak tamamen lorem içerikler ve amaçsız görsellerle hazırlanmıştı. Ben ise temayı yemek konsepti olarak düzenledim. Renkleri, görselleri ve içerik akışını kendi tasarım zevkime göre kişiselleştirdim.

Bu sayede hem HTML–CSS pratiği yapmış oldum hem de tasarım anlamında daha özgün bir sonuç elde ettim.

🧩 JavaScript Kısmı

JS tarafı oldukça minimaldi. Yine de daha anlaşılır olması için kodlara açıklama satırları ekledim.
Menü geçişlerini yöneten temel mantık:

  • Her menü butonunun bir sayfa içeriğine bağlı olması,
  • Tıklanan içerikte .active classının aktif edilmesi.

Ayrıca bazı kısımları anlamak için ChatGPT’den destek aldım ve aldığım yanıtları da projeye ekledim.

🎯 Sonuç: Küçük Ama Öğretici Bir Proje

Yoğun JavaScript beklerken daha çok CSS pratiği yapmış oldum; fakat bu proje bana:

  • Katman mantığını,
  • position özelliklerini,
  • mobil uyumlu alt navbar yapısını,
  • ikon entegrasyonunu

çok daha iyi kavrattı.

Şimdi sırada daha kapsamlı projeler var…
Yeni projelerde görüşmek üzere!

Bunlar da hoşunuza gidebilir