“Sınanmadığın günahın masumu sanma kendini”
by Sadi şirazi

Css ile Su Damlası Menüsü (Water Wave Menu)

Tarih: Şubat 4th, 2011 | Yazar: | Kategoriler: Css | Etiketler: | 4 Yorum »

Geçen gün cep telefonumda Need for Speed Hot Pursuit oynarken navigasyon menüsü dikkatimi çekti. Menüdeki herhangi bir butona tıkladığımızda bir su birikintisine, bir damla düşmüş gibi arkasında dalgalar bırakıyordu. Bu şekilde bir menüyü acaba sadece CSS kullanılarak yapılmış mıdır diye kısa bir araştırma yaptım ama herhangi bir sonuca ulaşamadım.

Yapılmış herhangi bir örnek bulamayınca kendim yapmaya karar verdim.

Menüyü şu adımları izleyerek oluşturdum;

  • Öncelikle yüksek border-radius değerleri ile ile yuvarlak halkalar elde ettim.
  • En üste menü elamanın kendisini z-index değerlerini ayarlayarak yerleştirdim. Bunu altına ise dalga efektini verecek elementleri ilave ettim.
  • Son olarak mouse, menü elemanlarının üzerine geldiğinde CSS’in transition özelliğini kullanarak animasyon şeklinde alta kalan halkaları genişlettim. Tabi halkalar genişlerken bulundukları konumu kaybettikleri için aynı anda top ve left değerlerini de uygun bir şekilde yine CSS transition özelliği ile ayarladım.

Sadece Chrome ve Safari de çalışıyor. Buradan test edebilir buradan da indirebilirsiniz