Merhaba ben Berre Sena KIRAÇ! Bu yazıda yaz stajımda yaptığım responsive menü tasarımından bahsedeceğim. Bunun için öncelikli olarak responsive tasarım nedir bundan başlayalım:

Responsive Tasarım: 

Türkçe karşılığı duyarlı tasarımdır. Gelişen mobil araçlar ile oluşan boyut farklılıklarının sonucunda web tasarımcılarının da bu boyut farklılıklarına göre bir tasarım sunması gerekiyor. Bunun için geliştirilen frameworkler olmakla birlikte bunu zor da olsa css ile hazırlamak mümkün. Bu projede sadece HTML , CSS ve JavaScript kullanıldı fakat Bootstrap gibi bir framework kullanabilirdi.

(Bootstrap özellikle responsive kısmında bize büyük avantajlar ve hızlı kod yazım özelliği sunan bir yazılımdır. Oluşturduğu companent yani bileşenler ile daha şık tasarımlar oluşturulabiliyor. Daha fazlası için Bootstrap’in kendi sitesine göz atabilirsiniz -güncel son sürümü için-: https://getbootstrap.com/docs/5.2/getting-started/introduction )

Menüyü inceleyecek olursak şu şekildedir: 

 

 

 

 

 

Menü 15.6 inch bir bilgisayarda ve diğer boyutlarda da bu şekilde tasarlandı. Bahsedilen responsive özelliklerini yazının ilerleyen bölümlerinde görsel eklentilerde görebilirsiniz.

Sağdaki resimde de görüldüğü üzere fare hareketinde üzerine gelindiğinde simge renk değiştiriyor ve bu da bize görsel zenginlik kazandırmış oluyor. Bu yapı CSS’teki :hover özelliğini kullanılarak oluşturuldu. :hover CSS’te belirtilen sınıftaki istenirse sınıf içerisindeki attribute yani belirtilen sınıf içerisinde kullanılan özellikleri de şekillendirme fırsatı sunuyor. 

Javascript ile menü açılır kapanır yani toggle dediğimiz yapıya getirildi. Açıldığında yani menü aktive edildiğindeki özelliklerini CSS ile bir class yapısında toplayarak ( bu yukarıda belirtilen sınıf içerisindeki özelliği kodlama yöntemi kullanılarak yapıldı böylece sayfadaki tüm yapı değişmemiş oldu.)  fonksiyon içerisine kodlanıldı. 

Yukarıdaki ev simgesine position eklenerek konumu belirtildi ve tıklanıldığında menüyü geri getirmek üzere javascript ile kodlanıldı.

Menünün farklı boyutlardaki duruşunu inceleyecek olursak şu şekildedir:

iPad

 

 

 

 

 

Galaxy Note 20 Linux

 

 

 

 

 

  Iphone 11Pro IOS14.6

 

 

 

 

 

Menülerde alt menü oluşturulamamıştır. Alt menü görünümleri bu yüzden eklenememiştir. 

Staj sürecim boyunca hem kendimi hem de projemi geliştirmemde yardımcı olan herkese çok teşekkür ederim.

Berre Sena KIRAÇ

KONYA TEKNİK ÜNİVERSİTESİ Bilgisayar Mühendisliği 

berresenakirac@gmail.com