Merhabalar,
Bu yazımda Html, Css ve Javascript kullanarak nasıl ekranı kaydırdığınızda daralan menü yaparsınız bundan bahsedeceğim. Bu olay ekranı aşağı kaydırmamızın Javascript tarafından algılanması, Css tarafından stile dökülmesi ve Html tarafından etiketlerinin oluşturulmasıyla gerçekleşecek umarım beğenirsiniz.
Bu kodları, ekranımızı aşağıya kaydırdığımzda ekranın üst tarafındaki menümüzü küçültecek şekilde yazacağım.
Hadi başlayalım;
Yukarıdaki Html kodlarımızda daralıp genişleyebilen menümüzün elemanlarını belirliyoruz. Ardından sayfamıza birtakım örnek yazılar yazıyoruz.
Butonların üzerindeki yazılar vb. metin alanlarını kendinize göre düzenleyebilirsiniz.
Evet buradaki Css kodumuz ile daralıp genişleyebilen üst menümüzün biçimsel özelliklerini ne miktarda büyüyüp ne miktarda küçüleceğini belirliyoruz. Css ile yapacağımız temel işlerde bu kadar.
Yukarıdaki Javascript kodlarımızda daralıp genişleyebilen menümüzün daralma ve genişleme fonksiyonlarını ve bunların özelliklerini belirliyoruz.
İnceleyebilmeniz için Codepen üzerinden de size yapılan işlemi bırakayım.
See the Pen Untitled by Hüseyin Çınar (@huseyin-cinar) on CodePen.
Evet sizde bu şekilde test edebilirsiniz. Umarım işinize yarar.
Mutlu Kodlamalar :)
