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.
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.
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.
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 : )
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.
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.
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.
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ş.
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.
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ış.
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.
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.
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.
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ı.
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.
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.
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ış.
18. menuAim.js eklentisi ile hazırlanmış resimli bir tasarım.
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.
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.
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.
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.
23. Yine rengarenk olan bir çalışma daha. Colorful kelimesini arattırırsanız daha fazla sonuç bulabilirsiniz Google’den.
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.
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.
26. Horizontal subnav diye ismini kaydetmişim bununda. Alt kategoriler alt alta değil de yan yana sıralanıyorlar.
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.
28. Sexy Drop Down
29. Mini.js eklentisi ile hazırlanmış bir kaç tane çalışma.
30. Vimeo sitesinin eski tasarımında kullanılan örneğin aynısı.
- 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.
32. Mac Os işletim sistemi benzeri bir çalışma.
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.
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.
35. Floating Menu
Mouse linklerin üzerine geldiğinde butonlar hafif yukarı doğru animasyonlu olarak çıkıyor.
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.
37. TagMenu
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.
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.
40. Flickr Horizontal
Flickr sitesindeki açılır menünün aynısı yapılmış.
- Demo
- Source
41. jqDock
42. DropDown
Menüdeki alt linkler tooltip benzeri açılıp kapanıyor.
Kırık Bağlantı
43. Animated Navigation
44. 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ı.
46. FluidMenu
47. 3 Level Navigation Menu
48. Minimalistic Navigation
49. Slide Down Box Menu
50. Stunningmenu
Benzer arama sorguları:
- html menu горизонтальное
- katlanabilir açılır menü örnekleri css
Güzel bir arşiv yapmışsınız hocam teşekkür ederim işime yarayan bi menü bulabildim sonunda
Hocam mükemmel bir arşiv gerçekten ellerinize sağlık.