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


Google Material Design Menu

material-design-menuGoogle‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.

Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.

Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.

Eğer hazırsanız başlayalım.

Ö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