23 Hamburger Bootstrap Menülerine Örnekler (Ücretsiz)
Bu Hamburger Bootstrap menü şablonu, özellikle hücresel olarak web sitenizi navigasyonunu artırmak istiyorsanız mükemmeldir. En iyi navigasyon öğelerini aramak yerine, bunun yerine zor iş yapıyoruz. Bunların hepsi hemen kullanabileceğiniz ücretsiz çözümlerdir. Size mümkün olduğunca çok farklı varyasyon getirdiğinizden emin oluruz. Ayrıca, bir hamburger menüsünün her örneği de düzenlenebilir ve ayarlanabilir. Sürümünüzü oluşturun! Artık rahatça çalışabileceğiniz düzgün menü işlevinden asla yok. Zarar yok, tüm kar. Zevk almak. En İyi Bootstrap Hamburger Menüsü V05 Web Sitesi Menüsü Örneği
V05 web sitesi menüsü, popüler bir bootstrap çerçevesine dayanan kendi hamburger menümüzdir. Bu, sağ üst köşedeki simgeleri gösteren ve navigasyonu sağdan kaydıran modaya uygun bir çözümdür.Olağanüstü performans, masaüstüne veya hücresel olarak bakarak, düzgün düzen nedeniyle bozulmadan kalır. Başka bir harika özellik, maviye tıklamak istediğiniz parçayı değiştiren Hover efektidir. Unutmayın, bir marka verebilir ve gerekirse ince bir dokunuş yapabilir veya kullanıma hazır sürümü kullanabilirsiniz. Daha Fazla Bilgi / V06 Web Sitesi Menüsü demosuna indir V06 web sitesi menüsü, yukarıdakilere kıyasla Bootstrap Hamburger menüsü ile neredeyse aynı bir çözümdür, sadece sol tarafa yansıtılır. Aynı simgeye, aynı sürgülü menüye ve Hover efektine sahiptir. Sağda navigasyon sallamak yerine, artık sol versiyonla akımı ile savaşabilirsiniz.
Buna ek olarak, snippet kodu çok kullanıcı ve düzenlidir, böylece hızlı bir şekilde kullanabilirsiniz. Yani, ayarlamalar yapmayı planlasanız bile, bitirmek için sadece biraz zamana ihtiyacınız var. Daha fazla bilgi / İndir Demo Menüsü V20 Web sitesi menüsü Özellikle tam bir ekran kaplama şablonu arıyorsunuz, V20 web sitesi menüsü en iyi seçimdir. Hatta varsayılan olarak karanlık bir tasarımla birlikte gelir ve onu özel kılar. Ücretsiz snippet’lerin bir başka harika özelliği, menüyü açtığınızda veya kapattığınızda etkin olan düzgün bir animasyondur. Buna ek olarak, bootstrap menüsü, cep telefonlarında, tabletlerde ve masaüstlerinde aynı güzel formatta kalır ve navigasyon özelliklerinin olağanüstü navigasyonunun kilidini açar. Daha Fazla Bilgi / İndir Hamburger Malzeme Tasarımı Demo
Chris Draycott-Wheatley bunu yarattı. Bunu CSS’de ve biraz JS ile inşa etti. Bu simge doğrudan çalışır. Üç yatay satır simgesini tıkladığınızda, çeşitli kategoriler görünecektir. Kaç kategori dahil etmek istediğiniz size kalmış. Bu tasarımdan isteyeceğiniz başka bir şey, bir önceki sayfaya dönebilmeniz için sol ok düğmesine sahip olmasıdır. Boyutu fareyi üzerine yönlendirecek kadar büyüktür. Arka plan rengi sadece simgeyi görmek güzel. Şimdiye kadar bu, her ana tarayıcının IE10+’nın iki en son sürümünü destekler. Umarım, yakında IE8+için mevcut en son sürüme sahip olurlar. Daha fazla bilgi / Yatay menü demo html5 / css3
Bu Hamburger Bootstrap menüsü aslında ‘hamburger’ değil, aynı işleve sahip. Dahası, simgeye bir menü ekleyebilirsiniz. Örneğin, simgede bir ‘HTML5 & CSS3’ makalesi olduğunu görebilirsiniz. Tıkladıktan sonra birkaç kategori görünecektir. Ziyaretçilerin web sitelerinde gezinmeleri daha kolay olacaktır. Sayfada hiçbir yerde ihtiyaç duyduklarını bulmaları gerekmez. Bu herhangi bir web sitesi için mükemmeldir. Ayrıca hücresel dostu olabilir! Beş menü ekleyebilir, ardından aşağıdaki kategoriyi istediğiniz gibi ekleyebilirsiniz. Dhanush rozeti bunu yapar ve sadece HTML5 CSS3.javascript veya programlama ile yapılmıştır, böylece bu işlev görür. Daha Fazla Bilgi / İndir Hamburger Menü Demosu – HTML, CSS & JQUERY Glenn Smith bu simgeyi HTML, CSS ve JQuery ile yaptı. Basit olmasına rağmen, işlev doğru ve pürüzsüz. Bazen, web sitesinin izleyicisinin, aradıklarını sorunsuz bulabilecekleri daha basit bir simge kullanması daha kolaydır. Bu menüyü ekranın sağ alt tarafında bulabilirsiniz. Beş kategoriye kadar ekleyebilirsiniz. Yalnızca listeye tıklayarak kategori görünecektir. Beyaz arka plan rengi, bu da izleyicinin başlığı net bir şekilde görmesini kolaylaştırır.
Bu menü ile ilgili tek şey altındaki içeriği kapsamaktır. İşlevi değiştirmek istiyorsanız, menü simgesinde ve menü panelinde bulunan Idex-Z’yi silin. Daha fazla bilgi / Demo Animasyon Menüsü “Hamburger” simge menüsü Hugo Darby Brown bu hamburger bootstrap menüsünü tasarladı. Simgelerle oynamak istiyorsanız, Brown’un hesabında paylaştığı bu sayfayı ziyaret edebilirsiniz – https://www.designcouch.com/. Bu menü için diğerlerine kıyasla farklı bir tat ekledi. Tüm kategorileri menünün altına koymak yerine, kategoriyi yanına eklemeye karar verdi. Bir resim içeren bir düğme ekleyebilirsiniz. Brown web sitesinden Bio, Job, Özgeçmiş ve Blog adlı dört kategoriyi ekledi. Aynı şeyi yaptığı bu hamburger simgesini kullanarak yapabilirsiniz. Menüyü kapatmak istiyorsanız X düğmesi var. Daha fazla bilgi / yapışkan menü demo
Lucas Bebber, bu menüyü oluşturmak için CSS ve SVG filtrelerini kullanır. Üç farklı versiyonu var. Benzersiz bir Bootstrap Hamburger menüsü arayan herkes için bu sizin için mümkündür. Zevkinize bağlı olarak, web siteniz için herhangi bir sürüm seçebilirsiniz. Sürüm 1 için, Circle Menü düğmesine tıkladığınızda, üst kavisli çizgi beş kategori düğmesi ile görünecektir. Menüyü kapatmak istiyorsanız, Sürüm 2 için X’i tıklatın, düğmeyi tıklattığınızda etrafında altı kategori görünecektir. Ya sürüm 3? Menüye tıkladığınızda, sağ tarafta dört ayrı daire düğmesi görünecektir. Son olarak, menüye tıkladığınızda dört kategoriye sahip sürüm 4 vardır. Bu sürüm 3’e biraz benzer; Sadece düğme birbirine çok yakın. Daha Fazla Bilgi / İndir Demo Tam Ekran Navigasyon Menüsü Demo Pure CSS
Brenden Palmer bu menüyü 17 Mayıs 2015 tarihinde tasarladı. ‘Tam Ekran Navigasyon Menüsü’ adından, kategori tüm sayfaları tüketecektir. Grupta düzenlenecek blogun önemli bir işleviyseniz, büyük bir sorun değil. En fazla dört kategoriye veya istediğiniz kadar ekleyebilirsiniz. Bunu yaparken kullandığı prensibi kopyalayın. Menüyü kapatmak istiyorsanız, sayfanın sol alt tarafındaki X düğmesini tıklayın. Daha Fazla Bilgi / İndir Demo Menüsü gerilme – Menü Etkileşimi Kavramları Hücresel arkadaşlık web siteleri için daha iyi bir Hamburger Bootstrap simgesi mi arıyorsunuz? Bu gerilme menüsü iyi bir konsepte sahiptir. Sadece sayfalar arasında atlamak için görüntüler çekmeniz gerekir. Fabrizio Bianchi, 26 Kasım 2014’te bu menü etkileşimi kavramını yarattı. Bu simgeyi kullanmanın benzersiz yoluna ek olarak, renk oldukça etkileyici. Dört veya daha fazla kategoriye kadar ekleyebilirsiniz. Küçük bir menü çektiğinizde, bir sonraki kategori görünür ve biraz daha çizdiğinizde, bundan sonra aşağıdaki kategoriye gidecektir.
Çekme menüsü, sürgülü listenin yerine iyi bir yedektir. Çalışma şekli, ferahlatıcı seçenekle aynıdır. Fark, sayfayı yenilemek değil, bir sonraki sayfaya atlamaktır. Bu aynı zamanda renk dolu ve kullanımı çok eğlenceli. Daha Fazla Bilgi / İndir Hamburger Morphing Menü Demosu CSS ile Bu aynı zamanda imgonzalves tarafından yapılan dost hücresel bootstrap hamburgerlerinin bir menüsüdür. Bu menüde istediğiniz şey, menüye tıkladığınızda, tüm sayfayı kapsamaz. İçerik kalacak ve kategorinin altına inecektir. Dört veya daha fazla kategoriye kadar ekleyebilirsiniz. Menüyü kapatmak istiyorsanız X düğmesi de var. Bunda benzersiz olan nedir? Bu, sitenize gelen kitleniz için daha kolay gezinme yaratır. Belki tıklamak istediğiniz seçenekleri bulmanın çok zor olduğu birçok web sayfası görmüşsünüzdür, ancak bunun için teşekkür ederiz. Blogunuza dahil edilmek için daha iyi bir fikriniz olacak. Daha fazla bilgi / iOS Style Demo Demo menüsünü indirin
Jason Howans tarafından yapılan menü, web sitesi yapımcıları tarafından en popüler ve sık sık kullanılanlardan biridir. Bu stil iOS kullanıcıları için tasarlanmıştır, ancak bu simge tasarımcısı, onu diğer işletim sistemi türleri için de kullanılabilir hale getirmenin diğer yollarını düşünüyor. Bu menü web sitenize de eklenebilir! Bu menüyü özel yapan nedir? Basit navigasyon. Yalnızca bir düğmeye tıklamanız gerekir ve tüm kategoriler oradadır. Menünün altına birkaç grup ekleyebilirsiniz. Burada kullanılan renkler de ziyaretçileri çekiyor. Daha Fazla Bilgi / İndir SVG Demo Gooey Hover Menü Kavramları Bu menü konseptini beğeneceksiniz. Farenizi simgeye taşıyın ve tüm kategoriler görünecektir. İstediğiniz hedeflere ulaşmak için farklı simgelere tıklamaktan kurtaracaksınız. Michael Leonard bu menü için bir kod yaptı. Bu menü altında altı öğe var. Kategoriden kurtulmak istiyorsanız, farenizi listeden doğrulayın. Navigasyon oldukça kolay ve ziyaretçiler onunla oynarken eğlenecekler. Daha Fazla Bilgi / İndir Demo Animasyon CSS Menü simgesi: Bu menüde menünüzü öğrenin, seçmek isteyebileceğiniz farklı öğeler vardır. Hamburger Bootstrap menüsüne ek olarak, bir Doner Menüsü, Bento Menüsü, Kebab Menüsü ve Köfte Menüsü bulunmaktadır. Farklı bir tasarıma sahip olmasına rağmen, prensip orijinal ile aynıdır. Web sitenize benzersiz bir stil eklemek istiyorsanız, bu sizin için doğru olabilir. Animasyonlu menü simgeleri Olivia ng tarafından tasarlanmış ve yapılır. Daha Fazla Bilgi / İndir Demo Navigasyon Koltuğu Menüsü Duyarlı
Mario Loncarek bu hamburger kaplama bootstrap menü stilini yarattı. Yalnızca tek bir tıklamada, tüm kategorileri göreceksiniz – bu ana kategorideki kategoriler bile. Bu tür bir menü düzenlenmiş ama basit. İhtiyacınız olan her şey tek bir düğmede derlenir. Bu, belirli şeyler arayan ziyaretçiler için bir avantajdır. Loncarek tarzında, kullanıcıların aradıkları kategorileri daraltmasını kolaylaştıran üç menü – hakkında, hizmet ve iş – yaptığını göreceksiniz. Bu simgeyi yapmak için CSS HTML ve JQuery kullandı. Renk nötrdür, bu da okumayı kolaylaştırır. Daha Fazla Bilgi / İndir Demo Menüsü Açılır Pure CSS3 / JavaScript Pedro Nauck bu açılır menü yaptı. Birkaç menü yapabilirsiniz. Resimden görebileceğiniz gibi, yaratıcı üç liste yaptı. Her menüde ekranda çeşitli kategoriler görüntülenir. Bu menüyü kullanarak gezinmek çok doğal. Menüler ve kategorileri görüntülemek için tüm sayfalarınıza gerek yok. İçeriği gizlemek için açılır oku tekrar tıklayabilirsiniz. Bu sadece hücresel dostu değil, aynı zamanda masaüstü dostudur. Güzel bir yazı tipi de var! İsterseniz yazı tiplerini kopyalayabilirsiniz, ancak zevkinize bağlı olarak biraz ayrıntıyı değiştirebilirsiniz. Daha fazla bilgi / indir demo menüsü konsept jöle setuholeg solomka menüsü bu süper sevimli ve fantastik menü konseptini oluşturur veya Lego mantar olarak da bilinir. Ayırt edici bir simge kullanmak yerine, aklındaki fikirlere renk vermek için sevimli bir simge kullanır. Daha basit veya benzersiz bir tane arıyorsanız tercihinize bağlıdır. Oleg Solomka, menü düğmesini nasıl yaptığını bile açıkladı. Bu sadece bir kavram. Bu konsepti web sitenizde de kullanabilirsiniz. Daha fazla bilgi / Düz bir menü ile demo düğmesi anahtarlama menüsü
Geoffrey Crofte bu menü stilini tasarladı. Bunu yapmak için CSS ve Vanilya JS için geçişi kullandı. Resimden de görebileceğiniz gibi, bu basit. Ancak görüntünün dışına bakarsanız, kullanıcılar için daha iyi bir navigasyon deneyimi sağlayacaktır. Bootstrap Hamburger menü düğmesini tıklayın, kategori görünecektir. Kategoriyi silmek istiyorsanız X simgesine tıklayabilirsiniz. Bu hücresel dostu bir tasarımdır, ancak bir masaüstünde gezinme için de mevcut olabilir. Menüdeki nötr renkler, blogunuzun veya web sitenizin herhangi bir teması için uygun hale getirir. Bu, siteden diğer içeriği kapsamaz ve bu blog kitleniz veya ziyaretçileriniz için +. Morphingk konsept menüsü ile daha fazla bilgi / indir Hamburger Icon Demo bu menü ile neredeyse diğerleriyle aynıdır. Bu menü tarzında benzersiz bir şey olmasına rağmen. Her ne kadar geçiş stili ile aynı gezinme yolu, farklı bir ekranda nasıl görünür. Diğerlerinden farklı olarak, bu dönüşüm menüsü web sitesinin bir tarafıdır. Şekil, birkaç kategorinin görüntülenmesi için de idealdir. Gizlemek istiyorsanız X düğmesini tıklamanız yeterlidir. Yeni başlayanlar için bunu takip etmek zor değil. Sergio Andrande tarafından dağıtılan kodu kopyalayın. Biraz düzenleyin ve sonra ayrılmaya hazırsınız. Daha fazla bilgi / sayfa eğiminin gösterisini indirin
Web sitenize başka bir tat eklemek ister misiniz? Neyse ki, sizinle paylaşacak bir şeyimiz var. Bu sayfanın eğim menüsü farklı bir şeydir ve web sitenize daha fazla ziyaretçi çekebilir. Marco Furago, bu hamburger menü stilini yaratan kişiydi. Sayfanızdan, sayfayı eğmek için Hamburger Bootstrap menü simgesini tıklayın, ardından menünüz kategorisi görünecektir. Kadar basit. Menü düğmenizin altına dört ve birkaç kategori ekleyebilirsiniz. Resimden de görebileceğiniz gibi, çok iyi bir görsel efekti var ve yazı tipi stili mükemmel. Renk ayrıca web sitesinin güzelliğine de katkıda bulunur. Daha fazla bilgi için / Duyarlı ve Megamenu Menü demosunun bir hamburger simgesi yoktur, ancak yine de bu menüden istediğinizi elde etmek için birkaç geçiş listesi vardır. Bazı web sitesi ziyaretçileri bunu tercih ediyor. Sayfada, menü şeffaf ve gezinmesi çok kolay. Aradığı öğeleri yalnızca onunla ilgili menüyü seçerek daraltacaklardır. Daha sonra kategori kolayca bulunacaktır. Daha fazla bilgi / İndir Tam Sayfalar Giriş ve Gezinme Demo Tam sayfa menü arayan bir kişiyseniz, bu sizin için çok iyi bir seçim olacaktır. Hamburger simgesine gittiğinizde, kategori tüm ekranda görünecektir. Bu da müdahale etmez; Kullanıcılar aradığı kategoriyi sadece simgeye tıklayarak bulabilir. Menüyü kapatmak istiyorsanız, X’i tıklatın, Başlat sayfasına geri döneceksiniz. Basit bir menü tasarımının yanı sıra, kolayca dinlenebilir. İyi navigasyon ve basit tasarım birlikte çalışabilir. Bu, web sitenizin işlevini istediğiniz gibi geliştirecektir. Daha fazla bilgi / indir Sara Sara Sara Circus demo Bu hamburger bootstrap sadece sıradan değil. Bu menü başlamak için cep telefonları için kullanılır. Ancak başka bir hamburger menüsü yaparsanız, bu web sitenize dahil edilmek için bir ilham kaynağı olabilir. Resme bakın. Sağ taraftaki hamburger simgesini göreceksiniz. Görüntüye tıkladığınızda, etrafında başka bir sembol görünecektir. Çeşitli kategoriler bulacaksınız. Menüyü kapatmak için X düğmesini tıklamanız yeterlidir. Menü simgenizdeki görüntüler izleyiciler için çekici. Bu, onlara her kategoride nelerin dahil olduğu hakkında anında fikirler verecektir. Sara Souidan bunun için çok iyi bir iş çıkardı! Daha Fazla Bilgi / İndir Demo