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

2
3141
views

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.
açılır kapanır

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.
drop down

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 😀 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.
animeband

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 : )
html5 nav

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.
turuncu

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.
facebook footer

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.
menuFlip

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ş.
link efekti

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.
html5 nav

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ış.
mavi navigasyon

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.
gerçekçi

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.
animasyonlu

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.
mükemmel

 

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ı.
Font Awesome

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.
esnek alt linkler

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.
rengarenk

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ış.
fixed

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

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.
sosyal medya

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.
seffaf

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.
ribbon

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.
Jytm

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

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.
stickey

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.
Navigation bar

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

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.
sosyalsaydam

28. Sexy Drop Down
Drop Down

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

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

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.
Garage

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

 

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.

slideoutreloaded

 

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.

haftonenavigation

 

35. Floating Menu

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

jQuery Floating Menu

 

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.

Realistic Hover Effect

 

37. Smooth Animated Menu

Mouse  linklerin üzerine geldiğinde buton  bölümü  animasyonu bir şekilde  aşağı  açılıyor ve link hakkında küçük bir  açıklama görünüyor. Ayrıca  örnekte jquery Easing de kullanılmış. Buda  demoya farklı  bir  güzellik kazandırmış.

 Smooth Animated Menu

 

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.

Advanced docking using jQuery

 

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.

iconDock

 

40. Flickr Horizontal

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

Flickr Horizontal Menu

  • Demo
  • Source

 

41.  jqDock

jqdock

 

42.  DropDown

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

CSS3 dropdown menu

 

43. Animated Navigation

Css3-Animated-Menu-Example

 

44. Two Level Menu

Pure CSS3 Two Level Menu

 

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ı.

Css3 Slick Menu

 

46. Gray Navigation Menu

Html5 navigasyon elementi ile yapılmış yatay menü örneği.

HTML5/CSS3 Gray Navigation Menu

 

47.  3 Level Navigation Menu

3 Level Navigation Menu

 

48. Minimalistic Navigation

Css3 Minimalistic Navigation Menu

 

49. Slide Down Box Menu

Slide Down Box

 

50. Stunningmenu

Create a stunning menu in CSS3

 

Aranan kelimeler:

  • siteye menü yapma
  • hazır menu
  • html menü
  • hazır menü indir
  • hazır menulewr
  • HAZIR AÇILIR MENÜ ÖRNEKLERİ
  • html yatay menü
  • Mintik açılabilir menü
  • php menü sitilleri
  • şekilli menü kodları
1 oy (31 votes, average: 4,68 out of 5)
Loading...
Önceki İçerikjqFloat.js
Sonraki İçerikPressimo
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

2 YORUMLAR

CEVAP VER

Please enter your comment!
Please enter your name here