50+ jQuery ve Css3 ile hazırlanmış yatay menü örneği

14Okunma
2 yorum

Websiteleriniz  için özgürce  kullanabileceğiniz  20 adet  menü örneği. Birbirinden farklı  tasarımlar  ve animasyonlarda oluşan bu menü  koleksiyonu içinde  zevkinize uygun  bir menü  örneğini  mutlaka bulacaksınız.  jQuery  ve Css3 ile hazırlanmış olan bu üst menü örneklerinde hover  efektleri  ve  değiişik animasyonlarda  bulunuyor.

1. Yeşil renkli, düz (flat) şekilde tasarlanmış, açılır kapanır bir çalışma. 50+

2. Bu güne kadar hazırlamış olduğum örnekler içinde en çok beğendiğim diyebilirim. Hala bile mouseyi kategorilerin üzerinde gezdirirken 3 boyutlu bir görünüm ile arkaplanın yukarı doğru çıkıp arkasında hafif gölge bırakmasını ve fade efekti ile alt linklerin görünüp kaybolmasını izlemek gerçekten heyecan veriyor. Belki herkesin kullanabileceği şekilde narin bir tasarım olmayabilir ancak benim gözümde favori olarak gördüğüm bir tasarım oldu bu her zaman. 50+

3. Bu da can sıkıntısından aklıma geldiğinde jQuery animate ve Css kullanarak hazırladığım bir çalışma. Drop down yani alt linkler için açılıp kapanan bölüm eklemedim. Kategori linklerinin üzerinde şeffaf bir band bulunuyor ve mouse ile herhangi bir linkin üzerine geldiğiniz anda şeffaf bant sağdan sola doğru kayıyor. Çok uzun süre önce yaptığım için bu şeffaf bölümü neyle yaptığımı bile hatırlamıyorum. Sanırım resim dosyası değildi derken sizler için biraz inceleme ihtiyacı duydum. Herhangi bir resim dosyası kullanmamışım :D Yine herkesin kullanacağı türden bir çalışma değil bu da. Animasyonlu örnekleri sevenler için işe yarar diyebilirim. Bunun da tek güzel tarafı kategori isimlerinin text-shadow ile 3D görüntüsünün olmasıdır. 50+

4. Bu da Html5 nav (navigation) etiketi ile hazırlanmış açılır kapanır bir tane tasarım. Rengarenk çalışmaları sevenler için bir numara : ) 50+

5. Turuncu renkli ve açılıp kapanan bölümü gri renkli olarak ayarlanmış bir tasarım. Alt linkler bu listedekilerden daha farklı bir şekilde çalışıyor. Her alt kategori için ayrı bir div ve sınıf eklenmiş. Bu yüzden kullanımı biraz zahmetli. 50+

6. Eski Facebook tasarımını hatırlayanlar bilirler. Sitenin en altında sabit bir şekilde duran, sohbet ve arkadaş listelerinin olduğu tasarımdır. Bu listedekilerin hemen hemen hepsi üst taraf için kullanılıyor olsa da aynı şekilde kullanıldıkları için sayfanın en altında veya en üstünde sabit bir şekilde duranları da bu listeye eklemek istedim. 50+

7. menuFlip.js adlı eklenti sayesinde mouse kategori linklerinin üzerine geldiği anda link beyaz arkaplan rengi olan link yukarı çıkıyor ve yerine siyah arka plan rengi geliyor. Ayrıca detay sayfasında eklentinin kullanımı detaylı bir şekilde anlatılıyor. 50+

8. Buna pek menü desek doğru olmaz aslında link efekti desek daha doğru olur. Mouse linklerin üzerine geldiğinde linklerin arka planında etrafı açık mavi ve içi de gri renkli bir baloncuk büyüyor. Mouseyi geri çektiğinizde ise baloncuk saydamlaşıp küçülerek kayboluyor. Benzerlerinden çok daha farklı bir tasarım olmuş. 50+

9. Çok daha öncesinden paylaşmış olduğum bütün tasarımları tek tek buraya eklerken başlıklarında Html5 nav etiketi ile yapılmış olduğunu belirtmediğimden dolayı listedekilerin bazılarında Html5 navigasyon diye açıklamasını yapmadım. Bu da Html5 nav etiketi ile hazırlanmış olan bir çalışma. Belki aynı etiketle hazırlanmış olup belirtmediğim bir kaç tane daha da vardır. Kaynak kodlarına bakarken daha yeni fark ediyorum. 50+

10. Mavi ve beyaz renkli tasarlanmış açılır kapanır navigation bir tasarım. En güzel tarafıda mouse linklerin üzerine geldiğinde alt link çerçevesinin yukarı doğru fade efekti ile görünüp kaymasıdır. Tooltip görüntüsüde bir başka hava katmış ve herhangi bir resim kullanılmamış. 50+

11. Benim için favori olan tasarımlardan bir tanesi de bu oluyor. Sanırım bir yada iki tane daha çok beğendiğim tasarım örneği arşivimde olması gerekiyor. Bu yazıyı düzenlerken bütün çalışmaları buraya ekleme kararı almıştım sizin sayfa sayfa dolaşmamanız için. Şimdiki öyle bir tasarım ki adeta gerçek gibi görünüyor. Mouse butonların üzerine geldiğinde sanki mıknatısmış gibi butonları kendine doğru çekiyor ve butonu tıkladığınızda da içeri doğru batıyor. İşin en güzel tarafı da gölgesi de kendisi ile beraber hareket ediyor olmasıdır. Ayrıca yansıma efekti gibi bir hali var. Butonun üst tarafı arka plana yapışık duruyor ve alt tarafında da biraz boşluk var gibi. içeri doğru batan kısmı da alt tarafıdır. Üst tarafında herhangi bir hareket yok. Bu güne kadar karşılaştığım benzersiz tasarımlardan biridir bu da. Ayrıca resimde hem tam boyunu hem de butonun büyütülmüş halini ekledim ki daha net görebilesiniz diye. Kategori linkleri de butonların içine kazılmış gibi görünüyor. Inset text olarak adlandırılıyor bu görüntü. Css’de böyle bir özellik yok. Renklendirmelerle oynayarak yazının içe doğru batmış şekilde görünmesini sağlıyor. 50+

12. Sayfanın en üstünde sabit duran özelliği ve animasyonlu olması açısından herkes tarafından kullanılabilir bir çalışma diyecektim ancak biraz kalın olması yüzünden herkesin beğeneceğine ihtimal vermiyorum. Mouse linklerin üzerine geldiğinde yavaşça renkler arası geçiş oluyor ve bu esnada da kategori ismi ile kategori isminin altındaki kısa açıklama sağa doğru kayıyor. 50+

13. Ve işte benim favori olarak gördüğüm bir diğer çalışma. Gerçekçi görüntü denince ancak bu kadar olur bence. İncelenen yani tıklanmış olan kategorinin butonu diğerlerinden farklı bir halde içeri doğru batmış bir şekilde görünür. Tıklanmış olan butonun üstündeki yazı mavi renkli bir ışık saçıyormuş gibi görünüyor. Ayrıca üstte ve altta da mavi bir ışık yansıması eklenmiş. Son derece mükemmel bir çalışma. Sadece Css kodlarını bile alıp kendinize bir site tasarlamanız için yetecek kadar gerekli kodlar var bu çalışmada. Kullanmazsanız bile kesinlikle arşivinizden eksik etmemeniz gerektiğini düşünüyorum. Eğer bütün konuları silsem dahi sadece bunu silmeye kıyamam. Net olarak butonları görebilmeniz için de büyüterek resmini ekledim ki böyle bir tasarımı gözardı etmeyesiniz. 50+

 

14. Renkleri o kadar cıvıl cıvıl değil resimde de gördüğünüz gibi. Daha çok animasyonlu tasarımları sevenler için uygun bir çalışma. Can sıkıntısından ve değişik bir şeyler üretme hevesi içinde iken böyle bir çalışma hazırlamıştım. Açılır link özelliği yok, Font Awesome ikonları ile resimler eklenmiş ve mouse butonların üzerine geldiğinde kategori başlıklarının olduğu bölüm başlıklarla beraber sola kayıyor mouseyi geri çektiğinizde de tekrar eski yerine geliyor. jQuery easing ve animate ile bu kayma işlemi yapıldı. 50+

15. Çoğu örnekteki problem uzun alt link başlıklarından dolayı artan kelimelerin görünmemesidir veya alt kısmın genişlememisidir. Bunda kategori başlıkları uzun olsa bile ona göre link çerçeveleri uzuyor. 50+

16. Sadece siyah olarak görünmesi biraz kötü olabilir ama mouse butonların üzerine geldiğinde her kategoriye ait olan alanın üstündeki border (kenar çizgisi) farklı renklerde görünüyor. Böylelikle hover (mouse üzerine gelme) esnasında ortaya rengarenk bir görüntü çıkıyor. 50+

17. Bu da fixed yani sabit olan bir tasarım. Sayfa ne kadar aşağı ve yukarı inip çıksa da en üstte sabit bir şekilde duruyor. En önemli özelliği de mouse alt kategorilerin üzerinde gezdiğinde butonların içe batıyormuş gibi bir görüntüsünün olmasıdır. Çerçevesinin hemen üstünde boydan boya uzanan sarı renkli border de siyah rengine farklı bir görünüm kazandırmış. 50+

18. menuAim.js eklentisi ile hazırlanmış resimli bir tasarım. 50+

19. Sosyal medya siteleri için hazırlanmış gibi görünse de sadece doldurmak amaçlı Google, Facebook ve Twitter yazılmış. Yine de hem sosyal medya hem de site kategorileri için kullanılabilir. Her butonun üzerine mouse geldiğinde farklı arka plan renkleri görünüyor. Sadece 3 tane renk seçeneği olduğu için kendinize göre çoğaltmanız gerekecek. Ayrıca 3 boyutlu görüntüye de sahip. 50+

20. Şeffaf görüntüsü ile arka plan rengi çerçeve içinde görünebiliyor ayrıca herkesin active diye bildiği tıklanmış olan kategori linkinin farklı renkte görünme özelliği de bulunuyor. Mouse kategorilerin üzerine geldiğinde arka plan rengi gri olurken drop down bölüm siyah oluyor. 50+

21. Png formatında hazırlanmış olan buton ile ribbon şeklinde görünen basit bir çalışma. Mouse kategorilerin üzerinden hızlıca geçtiğinde resimdeki gibi bir görüntü ortaya çıkıyor fade efekti ile. Sırf fade efektini kullanacaklar olur diye onu da bu listeye ekledim. 50+

22. Aynı çerçevede arama kutusunun olması ve arama kutusu içine tıklandığında boyunun uzaması çok değişik bir çalışma olmuş. Çoğu sitede olmasına rağmen her yerde bulunan çalışmalardan değildir.Rengi biraz kötü ama onu d akendinize göre düzeltirsiniz artık. 50+

23. Yine rengarenk olan bir çalışma daha. Colorful kelimesini arattırırsanız daha fazla sonuç bulabilirsiniz Google’den. 50+

24. Bir başka sabit çalışma daha. Web sitenin en altında sabit bir şekilde duruyor ve oldukça güzel bir tasarıma sahip. Hem sosyal medya ikonları bulunuyor hem de kategori linkleri bulunuyor. Sitemdeki en popüler olan çalışmalardan birisidir bu da. 50+

25. Sitemde bu kadar yatay tasarım olabileceğini düşünmüyordum. 3 yıl boyunca sürekli içerik paylaşınca olabiliyor demekki. Artık her biri için ayrı ayrı açıklama yazmak bile zor geliyor bana. 50+

26. Horizontal subnav diye ismini kaydetmişim bununda. Alt kategoriler alt alta değil de yan yana sıralanıyorlar. 50+

27. Sayfanın en üstünde sabit duruyor ve ekranda tam olarak görünmüyor. Saydam olduğu için yer kaplamıyor da diyebiliriz. Mouse çerçeve içine girdiği anda aşağıya doğru kayıyor ve netleşiyor. 50+

28. Sexy Drop Down 50+

29. Mini.js eklentisi ile hazırlanmış bir kaç tane çalışma. 50+

30. Vimeo sitesinin eski tasarımında kullanılan örneğin aynısı. 50+

  • Demo

31. Garage Door – Mouse resimlerin üzerine geldiğinde garaj kapısı gibi yukarı kayan bir çalışma. Çok eski ve oldukça da popüler bir tanedir. 50+

32. Mac Os işletim sistemi benzeri bir çalışma. 50+

 

33.  Slide Out Navigation Revised

Tympanus sitesi  tarafından hazırlanmış  kullanışlı bir  üst menü örneği. Demo sayfası  açılır  açılmaz menü yukarı  doğru çıkıp sadece  başlıkar görünüyor. Mouse  ile başlıkların üzerinde gezdiğinizde  ise  buton aşağı kayıp  iconlar  görünüyor.

50+

 

34. Halftone Navigaton

Martin Angelov tarafından hazırlanmış bir  üst menü örneği.  Bu örnekte  mouse  ile linklerin üzeirnde  gezdiğinizde  linklerle  alakalı  ikonlar  sağ tarafta  görünüyor.

50+

 

35. Floating Menu

Mouse linklerin üzerine geldiğinde  butonlar hafif  yukarı doğru animasyonlu olarak çıkıyor.

50+

 

36. Realistic Hover Effect

Bu efekt  aklınıza  gelebilecek her yerde  kullanılabilir. İlla menü olacak diye  bir  durum söz konusu değil. aynı efekti  resimlerinize  butonlarınızada  uygulayabilirsiniz. Mouse  butonların üstüne geldiğinde  butonar  yukarı çıkıyor ve  butonların altındaki gölge de butona  göre gerçekçi bir  hareket gösteriyor.

50+

 

37. TagMenu

50+

 

38.  Advanced docking

Sayfanın sol tarafında  sabit olarak duran ve mouse  ile  butonların üzerine  geldiğinizde  butonlarla  alakalı  kategorilerin açıldığı kullanışlı bir  menü örneği.

50+

 

39. iconDock

Mac işletim sistemindeki   animasyonlu butonların  bir benzeri  olarak hazırlanmış bir menü örneği. Mouse  ile üzerinde  gezdiğiniz butonlar büyüyor ve menü küçük bir yay şeklini  alıyor.

50+

 

40. Flickr Horizontal

Flickr  sitesindeki  açılır menünün aynısı  yapılmış.

50+

  • Demo
  • Source

 

41.  jqDock

50+

 

42.  DropDown

Menüdeki  alt  linkler  tooltip benzeri  açılıp kapanıyor.

50+ Kırık Bağlantı

43. Animated Navigation

50+

 

44. Two Level Menu

50+

 

45. Css3 Slick Menu

Birçok  kişi  tarafından beğenilen ve bir çok sitede  tasarımı  tanıtılan DragonInteractive sitesindeki  menülerin aynısı.

50+

 

46. FluidMenu

50+

 

47.  3 Level Navigation Menu

50+

 

48. Minimalistic Navigation

50+

 

49. Slide Down Box Menu

50+

 

50. Stunningmenu

50+

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-27 tarihinde yayınlandı,Toplam 10406 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
Abdullah ÇALI Yorumcu LV.1
2015-09-04 23:47:45 回 Yanıtla

Güzel bir arşiv yapmışsınız hocam teşekkür ederim işime yarayan bi menü bulabildim sonunda

Haberler Yorumcu LV.1
2016-02-09 13:34:05 回 Yanıtla

Hocam mükemmel bir arşiv gerçekten ellerinize sağlık.