CSS ile Responsive Dropdown Menu

css-dropdown-responsive-menuSadece CSS kodlarıyla açılabilir (dropdown) ve mobil uyumlu menü hazırlanabilir mi? Birkaç sene öncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden öteye geçemezdi. Ancak bugün, CSS3’ün gelişen tanımlarıyla web tarafında neredeyse herşey mümkün!

Ayrıca aç/kapa düğmesiyle bu menüyü taşınabilir cihazlara özel stilize de edebiliyoruz. Evet, yanlış duymadınız. Aç/kapa işlemini bile sıradan bir checkbox öğesini selector gibi kullanarak CSS ile hazırlıyoruz.

Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menü hazırlayacağız. Sadece kod tarafında değil, önyüzde de basitliğe yönelerek bu tasarımı yapacağız.

Örneği görüntüleyerek derse başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS ile üzerine gelince açılan kutucuklar oluşturun!

CSS Açılabilir KutuWeb sayfanıza CSS desteği ile üzerine gelince açılan bilgi kutucukları ekleyebilirsiniz. Overflow elemanının hidden değeriyle gizleyeceğimiz detaylı bilgi sadece onmouseover ile aktif olmakta. Hazırlayacağımız örnekte bu uygulamayı HTML5 ile listeye eklenen section elemanı ile birlikte kullanacağız. Fakat istek dahilinde bu etki div veya table öğeleri için de uygulanabilir.

Makalenin alt kısmından tasarımı canlı olarak test edebilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

WordPress için dropdown menü nasıl hazırlanır?

WordPress Dropdown Menu

WordPress için <select> form öğesiyle menü hazırlamak eskiden biraz can sıkıcıydı. Fonksiyonlar arasına sıradan bir <nav> tipi menüyü dropdown (açılabilir) menüye çevirmemizi sağlayacak yazılımlar eklememiz gerekiyordu. Tabii işlem bu kadarla bitmiyor. Fakat artık bu kod karışıklığını unutun.

Bu makalemizde “WordPress siteme en kolay şekilde dropdown menü nasıl eklerim?” sorusunun cevabını anlatacağız. (daha&helliip;)

Devamını Oku