JavaScript ile Sekmeli İçerik Kutusu
Teknik konularda farklı durumlardan bahsetmeyi pek sevmesem de, yazmak şart oldu bence. Diyeceğim pek bir şey yok aslında. Bloga çok vakit ayırmıyorum, neredeyse senede bir yazı giriyor gibiyim. Daha sık yazı yazmamı istiyorsanız eğer yorum yapabilir veya mail atabilirsiniz. Şimdiden teşekkürler!
Bahsedeceğim konu 2015 yılı web teknolojileri için sanki geri kalmış bir konu gibi olsa da kendi oluşturduğum bu içeriği sizinle de paylaşmak istedim. Yazı başlığından ve görselden anlayacağınız üzere JavaScript dilini kullanarak kendi sekmeli içerik kutumuzu oluşturmuş olacağız. Oluşturduğumuz sekmeli içerik kutusunun biçimsel özelliklerini ise CSS ile yazdım. Bu içerik kutusunu oluşturmadan önce codepen.io gibi daha birçok açık kaynak konuyla ilgili çalışmalara göz attım. Yazmış olduğum JavaScript kodu biraz onların yanında amatör gibi kalsa da, şuan güncel olan web platformlarında gayet stabil çalışabilmekte.
HTML/CSS: İlk olarak nasıl bir içerik kutusu yapacağıma karar verdikten sonra ortaya böyle bir kutu çıkardım. Renk seçimlerini ise Turuncu, Mavi ve Beyaz renklerden yana kullandım. (Beyaz renk mi?) Turuncu renk, seçili olan sekmeyi temsil etmekle olup mavi ise fare ile üzerine gelinen sekmeyi göstermektedir. Kenar çizgilerinde herhangi bir oval işlemi uygulamadım. Bu biraz Windows Metro arayüzünü anımsatmıyor değil. Yazı tipini Google Font aracılığıyla Titillium Web olarak belirledim. Geçişlerdeki hafifliği yine CSS’in Keyframe özelliği ile yaptım.
Continue reading…