Bottom Navbar Projesi

Javascript çalışma sürecimin ikinci projesidir. Projeyi inceleseydim muhtemelen başlamazdım zira fazla js kodu içermiyor. Yine de css alıştırması niteliğinde hızlı bir çalışma oldu. Ayrıntılar yazının ilerleyen aşamalarındadır.

Bottom navbar nedir? Alt Navigasyon Çubuğu olarak tercüme edebileceğimiz menü tipidir. 4-5 sayfadan oluşur. Mobil görünüm için uygundur. Farklı versiyonlar ile menüler hazırlanabilir. Benim yaptığım versiyon blog hesabın anasayfa, ürünler, iletişim ve blog sayfalarından oluşuyor.

Html de bir container tanımladık. Bu önümüzdeki tüm sayfayı kapsar. Sonra card classı tanımladık bu da menümüzün olduğu alanı kapsar. Bu kısımda boyutunu belirlemek için css özelliği gireriz. Aynı özellik alması için sayfalara aynı class atandı sayfaları özelleştirmek için de farklı isimler verildi. content prodact veya content blog gibi. Birkaç sayfa hazırlayaçağımız için üst ve alt classları iyi belirlemek gerekir.

Html de kullandığımız diğer bir durum ikonlar. İkonları çektiğimiz sayfanın URL ini başta ekliyoruz. Daha sonra istediğimiz ikonların html kodlarını ‘i’ etiketi içinde ekliyoruz. İkon çekmek için web de çeşitli siteleri kullanabilirsiniz. Ben https://fontawesome.com/ sayfasını kullandım.

Css de sayfaların görünür olma durumlarına dikkat etmek gerekti. Yani belirlenen alana basıldığında sayfanın görünmesi ve diğerinin arkada kalması durumunu .active classı ile sağladık. Katman durumunu göz önünde bulundurmak gerekti. #opasitiy etiketi ile de görünmezlik özelliği verildi.

Bu proje de şahsi öğrendiğim özellik oposition oldu. Aldığı değere göre ne özellik kattığını aşağıda tablo şeklinde ekliyorum.

Js kısmında direk ekran görüntüsü ekliyorum. Anladığım kadarıyla açıklama satırları ekledim.

Daha anlaşılır olması için ChatGPT kullanarak bazı cevaplar aldım. Onları da ekliyorum.

Yeni projelerde görüşmek üzere…