nav

Google Material Design Menu #2

Vatanay Özbeyli 1 Yorum CSS3, HTML5, jQuery

google-material-design-menu2Google‘ın tasarım devrimi üzerine konuşmaya devam ediyoruz. Material Design’ın günden güne web tarafına uyarlanan örnekleri bizim makalelerimizde de yerini buluyor. Daha önce buradaki makalemizde şık bir Material Design menü örneği hazırlamıştık.

Şimdi de ekranın büyük bir kısmını kaplayan, daha büyük yapıdaki bir başka menü tasarımı konu edeceğiz. HTML5, CSS3 ve jQuery desteğiyle hazırlayacağımız bu tasarım soğuk renklerden oluşuyor.

Bu makalemizde üzerine tıklandığında büyük ölçülerde açılan ve içeriği aksi yöne ittiren şık bir menü tasarımı hazırlayacağız. İkinci Material Design menü örneğiyle sizlerleyiz!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS ile Responsive Dropdown Menu

Vatanay Özbeyli 2 Yorum CSS3, HTML5

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

HTML5 ile Ne Değişti?

Vatanay Özbeyli Yorum yazın HTML5, Tasarım Unsurları

HTML5HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.

Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.

İşte karşınızda ilk ve tek tam liste! (daha&helliip;)

Devamını Oku

WordPress Sitenizin Nav Menusune Arama Kutucuğu Eklemek

Vatanay Özbeyli 2 Yorum Eklentiler, Temalar, WordPress

Merhaba arkadaşlar. Ben Vatanay Özbeyli. Bu dersimizde WordPress 3.0 ve üzeri versiyonlarda üst kısımda bulunan Nav Menuye arama kutucuğu ekleyeceğiz.

WordPress’de arama penceresi $searchform olarak tanımlıdır. Bu hatırlatmayı yaptıksan sonra dersimize başlayabiliriz.

Aşağıdaki PHP kod satırını temanızın function.php isimli dosyasına ekleyiniz. Nereye eklediğinizin pek önemi yok. Muhtemelen function.php’nin en üst kısmana da ekleyebilirsiniz.

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();

$items .= '<li>' . $searchform . '</li>';
return $items;
}

Bu işlemi yaptığınızda arama kutucuğu görünür olacaktır. Fakat “Bu kutucuğa özel bir stil hazırlamak istiyorum” diyorsanız küçük bir değişiklik yapmanız gerekecektir.

$items .= '<li>' . $searchform . '</li>';

Az önce function.php’ye eklediğimiz üstteki kodu alttakiyle değiştiriniz. Böylece stil için geçerli bir id tagı ekledik. İsteğe göre class kodu da ekleyebilirsiniz.

$items .= '<li id="adobewordpress">' . $searchform . '</li>';

Şimdi temanızın geçerli CSS dosyasını açarak aşağıdaki şekilde stil işlemleri yapabilirsiniz.

#adobewordpress{background-color:#FFF; ve diğer css kodlamaları...}

Devamını Oku