css 3 icon

Javascript Kullanmadan Sadece CSS ile Responsive Menü

1.002

[ Okuma süresi tahmini 2 dakikadır ]

Neden Javascript’siz Menü?

Temel nedeni şöyle; CSS kullanarak yapılabiliyorsa neden olmasın.
Bu sitede kullandığım bir önceki menü geçen yıl tamamen responsive temaya geçerken bulduğum javascript kullanan bir menü sistemiydi.

Ufak ve çok yük getirmeyen basit ve sade bir javascript’i olmasına rağmen, olmasa olmaz mı diye hep rahatsızlık verdi.

Sadece CSS ile Yapılabilen Responsive Menü

Evet, buldum. Andreas Storm’un responsive menu – no js çözümü. Gayet sade. Her türlü tasarım olarak düzenleyebileceğiniz esnekliğe sahip temiz, saf ve sadece CSS ile bir menü. Tamamen responsive. %100 mobil uyumlu.
Tüm iOS cihazlarda sorunsuz çalışıyor. Test edebildiğim Android cihazlarda da sorunsuz görünüyor. Yeni nesil tüm tarayıcılarda çalışıyor. Tabii menüyü siteye ve WordPress’e adapte etmek için biraz uğraşmak gerekiyor.

Örneğin mobil menüde 3 çizgili hamburger button‘un menü açıldığında x haline gelmesi bile sadece CSS kodları ile yapılabiliyor. Hem CSS ile hamburger buttonu yapabiliyorsunuz, hem de bu sitede kullandığımız gibi Genericons ikonları da kullanabilirsiniz.

Genericons kullanımını merak ediyorsanız WordPress’de Genericons Kullanmak yazımız okuyabilirsiniz.

Artık Javascript menü ikonları kullanmaya mahkum değilsiniz. Tabii tüm bunlar CSS 3 ile mümkün.

CSS 3 Hakkında Her Şey

CSS 3’ün harika özellikleri var. Tüm özelliklere w3schools.com/css/css3 sayfalarından ulaşabilirsiniz.

Her özellik için detaylı açıklamalar ve örnekler mevcut.

Sonuç

Yaşasın CSS 3.

Kelime Sayısı: 257 3 yorum yapılmış

Yazı altı elemanları

"Javascript Kullanmadan Sadece CSS ile Responsive Menü" için 3 yorum yapılmış

Yorumları

Check-box mantığı. Evet aklıma gelmişti. O zaman bunun animasyonlu halini geliştirip codepen’de paylaşmak lazım. 🙂

Volkan, deneme yanılma ile ve biraz mantık yürütürek yapabildim. Ancak kodların temizliğinden emin değilim. İçinde fazla, hatalı kullandığım css elementeleri olabilir. İlginç olan CSS düzenleyiciler kodları bozuyor ve anca mevcut hali ile çalışıyor menü. Animasyonlu halini geliştirmek beni aşabilir. 🙂

Bir şey mi söyleyeceksiniz?

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir