CSS teknikleri kullanılarak animasyonlu menü hazırlamak

CSS teknikleri kullanılarak animasyonlu menü hazırlamak
12,968 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.

  • AnonimBerat: :) Çok teşekkür ederim Fatih. Kusura bakma çok güzel ve sade anlattığın halde acemiliğimden dolayı o kısmı kaçırdım. Öğreniyoruz sayende. Benim içinde çok iyi oldu toplam okunma ...
  • AnonimFatih Toprak: Selam dostum, aslında ben hiç bir şey yapmadım. Sadece az yukarıya aldım okunma sayıları kısmını ;) Burda yaptığın hata şu olmuş, Sen $okunma değişkeninini poo.js configure etti...
  • AnonimBerat: Animasyonda sıkıntı yok. "number: 198762765" şeklinde yazdığım zaman ordaki sayıya animasyonlu şekilde kolay bir şekilde ulaştım. Ama oraya toplam okunma sayısını yazdıramadım. O nede...
  • AnonimFatih Toprak: Berat şimdi dostum olay şu şekilde, Şu kısım zaten senin kendi okunma sayılarını yazı içinde göstermene yarıyor. ...
  • AnonimFatih Toprak: Windows kurulu olan makinamda alakalı ipuçlarını bizzat kullanıyorum. Sıkıntı yaşatmaıd bana şahsen. Ses herşey olabilir. Disk olabilir -ROM da olabilir. Hangisinden kesin ses geldiğinden...

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