CSS teknikleri kullanılarak animasyonlu menü hazırlamak

CSS teknikleri kullanılarak animasyonlu menü hazırlamak
12,616 Gösterim

Fatih Toprak Profilleri

Fatih Toprak Fatih Toprak'a
sosyal medya hesapları üzerinden
ulaşabilirsiniz. Kimdir ?

Bu şekilde paylaşılan hazır kodlar gayet güzel ve yararlı oluyor yer yer projelere göre. Hem benim için de bir şekilde online olarak sakladığım data bank yerine de geçiyor diyebilirim. Yan taraftaki arama kısmı her ne kadar sağlıklı olarak çalışmasa da zaman zaman ben aradıklarımı kendi sitemde dahi bulamasam da üstteki detaylı arama kısmından çözüme erişiyorum. Sizlerde o şekilde yapabilirsiniz.

Önizleme.Dosyaları indir.

Bu ipucu yazısında sizler ile CSS3 tekniklerini kullanarak , Rolling animasyonu sayesinde olduğundan daha havalı olabilecek bir menü örneği hazırlamış olduğum demo vasıtası ile daha hareketli olarak CSS3 query’leri kullanımı hedeflediğim dönemlerde ürettiğim / bulduğum / edindiğim tecrübeleri bir yandan da sizlere örnek uygulama olarak hazırlayıp sunmuş olacağım.  Yakın gelecekte wpkepp adındaki beni çok heyecanlandıran bir proje ile de tamamen artık kişisel blogum üzerinden fazla wordpress yazısı yazmayacağımın mümkünse, tamamen wpkeep üzerinden devam edeceğiminde duyurusunu kısaca üstü kapalı olarak buradan belirtmek isterim. Kısa zamanda proje ile de alakalı zaten detayları yazıyor olacağım. Gelelim asıl konumuza; CSS3 kullanarak nasıl animasyonlu menü hazırlamışız. Buyrun bakalım…

POZRolling CSS Menü nasıl hazırlanır ?

Ben menüye efektinden ötürü bu şekilde bir isim vermiş oldum. O nedenle altta buna benzer tanımlamalar gördüğünüzde nedir bu durumundan evvel açıklama gereksimi hissettim. HTML 5 yapısı ile de bütünleştirip, CSS3 queryleri sayesinde enfes bir uygulama çıktısı aldım diyebilirim. Şu adresten demoyu görebilirsiniz.  Bu iki basit CSS3 tanımlaması ile çalışmanıza efekt vererek menüyü daha gösterişli hale sokmuş olacaksınız.

Kısaca kullandığımız betiklere göz atacak olursak ; kurguladığımız uygulamada, ul değerleri ve li değerleri için CSS3 efekt özelliğinden yararlanmış olduk . Kısaca sizlerde ; kaynak dosyayı indirip, veya demodan ul ve li tagleri için yazmış olduğum satırları kendi projenize dahil edip, kullanarak menülerinizi biraz olsun hareketlendirebilirsiniz. CSS3 transations ile alakalı detaylı bilgiye ise şu adresten ulaşabilirsiniz.

Yakın gelecekte daha fazla CSS3 örnekleri hakkında yazıyor ve kaynak kodlu uygulamaları paylaşıyor olacağım. Takipte kalın.

  • AnonimFatih Toprak: Selamlar. Bu duruu sağlayan temanızda yerleşik fonlsiyonlar ya da eklentiler olmaıs gerekli ki bunları düzenmeek kaldırmak durumundasınız....
  • Anonimdemir doğu: meraba fatih bey aslından faceden ekledim sizi ama sonuç alamadım .. benim bi biilginize ihtiyacım vardı.. google webmaster araclarında yapılandırılmış işaretler var.. test edildiğinde ...
  • AnonimBerat: Merhaba Fatih, Wordpress teması için nereye bakmalıyım sence?...
  • Anonimvahid özçelik: anlatımınız çok güzel teşekkür ederim inşallah işimizi görür....
  • AnonimFatih Toprak: Durum aslında tek makalede çözülecek durum değil gibi. Sunucu taraflı optimizasyon çok tatlı ediyor siteyi. Apache için Google'in geliştirdiği bir modül var. Mod pagespeed. Eğer s...

Bu içerik için henüz hiç kimse görüş bildirmemiş. İlk olarak siz yorum yazamaya ne dersiniz ?

Fatih'in daha fazla yazı yazması için yorumlayın ;)

Yorum yazmadan önce, bir kaç detay:
1- Yorumlarınıza kod örnekleri eklemek istiyorsanız; <pre lang="php">Kodlarınızı buraya yazınız</pre> şeklinde girdilerinizi oluşturunuz.
2- Hiç bir web sitesi linkini çıkış olarak tanımlamadığımdan, boşu boşuna reklam kokan yorumlar yapıp zamanınızı çalmayınız.
3- Usulüne uygun eleştiri yapmanız mümkün ancak hakarete varan saçma yorumlar yapmadan efendiliğinizi koruduğunuz sürece her yorum yayınlanacaktır, bilmelisiniz.
4- Doğru posta adresi, ad soyad yazmanız gerekir ki yorumlqrı yorumlayan kişiye olan hitap şeklimiz saçma olmasın, şayet ulaşılası durumlarda mailleşebilmemiz gerekebilir.
5- Yorum ekleme esnasında, eklediğiniz mail adresinizi spam vb. gibi promosyon içerikli maillerle şişirip canınızı sıkmayacağımı, başkaları ile paylaşmayacağımı da CC yasaları gereği gizlilik ve kullanım sayfasında açıkladım, buradan inceleyebilirsiniz.

Konu başlıkları : Web Tasarımı - Wordpress