Menü
Bedava
kayıt
ev  /  Gezginler/ CSS'de güzel burger menüsü. Hızlı jQuery hamburger menüsü oluşturma

CSS'de güzel burger menüsü. jQuery ile hızlı bir şekilde hamburger menüsü oluşturun

Vitaly Rubtsov'dan ve bunu gerçekleştirme arzusuna direnemedi.

Bu eğitimde, bunu JavaScript olmadan sadece CSS ile nasıl yapacağınızı göstereceğim. Bu yüzden, neredeyse bu animasyonlu gif kadar pürüzsüz bir animasyon elde etmemizi sağlayacak bazı CSS (ve SCSS) hileleri göreceğiz.

Yapacağımız şeye bir örnek:

İşaretleme

Kullanacağımız HTML yapısıyla başlayalım. Daha iyi anlamak için yorumlara bakın.

İlk SCSS Stilleri

Şimdi isteneni elde etmek için bazı temel stiller ekleyelim dış görünüş... Kod oldukça basittir.

/ * Temel stiller * / * (kutu boyutu: border-box;) html, gövde (kenar boşluğu: 0;) gövde (yazı tipi ailesi: sans-serif; arka plan rengi: # F6C390;) a (metin-dekorasyon: yok;) .container (konum: göreli; kenar boşluğu: 35 piksel otomatik 0; genişlik: 300 piksel; yükseklik: 534 piksel; arka plan rengi: # 533557; taşma: gizli;)

Anahtarlama işlemi

Arayüzün geri kalanını oluşturmaya başlamadan önce, bir durumdan diğerine kolayca geçiş yapmak için bir geçiş işlemi ekleyelim.

İhtiyacımız olan HTML zaten yerinde. Ve onu çalıştıran stil şuna benzer:

// #toggle onay kutusunu gizle (display: yok;) // Onay kutusu seçildiğinde "open" durumu için stiller #toggle: işaretli (// Menüyü açarken stil vermek istediğiniz herhangi bir öğe burada bir seçiciyle gelir ~ // Gezinme menüsünü açmak için stiller, ör. & ~ .nav ()

Kapalı durum yapmak

Kapalı durumu yapmak için hamburger ikonunu almak için menü maddelerini satırlara dönüştürmemiz gerekiyor. Bu dönüşümü gerçekleştirmenin birkaç yolu vardır. Aşağıdaki gibi yapmaya karar verdik:

Ve işte bunu uygulayan kod.

$ geçiş süresi: 0,5 sn; // Gezinti öğelerini, hamburger simgesi gezinme öğesini oluşturan çizgiler olarak görüntüle (konum: göreli; görüntü: satır içi blok; kayan nokta: sol; temizle: her ikisi; renk: şeffaf; yazı tipi boyutu: 14 piksel; harf aralığı: - 6.2px; height: 7px; line-height: 7px; text-transform: büyük harf; beyaz boşluk: nowrap; transform: scaleY (0.2); geçiş: $ geçiş süresi, opaklık 1s; // İlki için bir genişlik ekleyin line & : nth-child (1) (harf aralığı: -8px;) // İkinci satır için genişlik ekleme &: nth-child (2) (harf aralığı: -7px;) // Şundan başlayan öğeler için ayarlar dördüncü & : nth-child (n + 4) (harf aralığı: -8px; margin-top: -7px; opaklık: 0;) // önce hamburger simgesi &: için satırları alın (konum: mutlak; içerik : ""; üst : %50; sol: 0; genişlik: %100; yükseklik: 2 piksel; arka plan rengi: # EC7263; dönüştürme: çeviriY (-50%) ölçekY (5); geçiş: $ geçiş süresi;) )

Lütfen burada gezinme öğeleri için yalnızca en önemli olan temel stilleri yerleştirdiğimizi unutmayın. Kodun tamamını Github'da bulabilirsiniz.

Açık bir menü oluşturun

Yaratmak menüyü aç, gezinme öğelerini satırlardan normal metin bağlantılarına geri yüklememiz ve bir dizi küçük değişiklik yapmamız gerekiyor. Bunun nasıl yapılacağına bakalım:

$ geçiş süresi: 0,5 sn; #toggle: işaretli (// Open & ~ .nav (// Menü simgesi gezinme öğesindeki "satırlardan" gezinme öğelerini geri yükle (renk: # EC7263; harf aralığı: 0; yükseklik: 40 piksel; satır yüksekliği: 40px ; margin-top: 0; opaklık: 1; transform: scaleY (1); geçiş: $ geçiş süresi, opaklık 0.1s; // Satırları &: önce gizle (opaklık: 0;))))

Sihir küçük şeylerdedir

GIF'e daha yakından bakarsak, tüm menü öğelerinin aynı anda değil, bir dama tahtası deseninde hareket ettiğini göreceğiz. Bunu CSS'de de yapabiliriz! Temel olarak, her bir elemanı (ile: nth-child) seçmemiz ve geçiş gecikme değerini solmaya ayarlamamız gerekiyor. Bu kesinlikle tekrarlayan bir çalışmadır. Ya daha fazla eşyamız varsa? Endişelenmeyin, biraz SCSS büyüsü ile daha iyisini yapabiliriz:

$ öğeleri: 4; $ geçiş gecikmesi: 0.05s; .nav-item (// $ i için 1'den $ öğelerine (&: nth-child (# ($ i)) kapatılırken gezinme öğeleri için gecikmeyi ayarlayın) ($ delay: ($ i - 1) * $ geçiş - gecikme; geçiş gecikmesi: $ gecikme; &: önce (geçiş gecikmesi: $ gecikme;))))

Bu kodla, kapanış animasyonu için istenen adımlama davranışını alacağımızı unutmayın. Açılış animasyonunun geri adım atabilmesi için $ gecikmesini biraz farklı hesaplamamız gerekiyor. Bunun gibi:

$ gecikme: ($ öğeler - $ i) * $ geçiş gecikmesi;

Çıktı

İlginç menümüzle işimiz bitti! Ayrıca, hareketli bir gif'teki gibi bazı kukla öğeler de ekledik ve görebilirsiniz.

Bu nedenle, basit ve işlevsel bir CSS yalnızca menüsü oluşturduk. Ancak, CSS geçiş sistemini kullanmak istemiyorsanız, ideal olarak fazla çaba harcamadan birkaç satır JavaScript ile değiştirilebilir.

Umarız bu öğreticiyi beğenmişsinizdir ve faydalı bulmuşsunuzdur!

Şimdiye kadar sadece düzeni yaptık.

5. jquery-3.3.1.min.js kitaplığını indirin

bizimkine bağlanıyoruz HTML kapanış etiketinden önceki belge vücut iki dosya, bunlardan biri hala boş.



6. JS'de bir etkinlik oluşturun

Aşağıdaki kodu bir dosyaya yazıyoruz script.js

$ (işlev () (
$ (". menuBurger"). on ("tıkla", işlev () (
$ (". menü"). slideToggle (200, fonksiyon () (
if ($ (bu) .css ("ekran") === "yok") (
$ (bu) .removeAttr ("stil");
}
});
});
});

ayrıntıya girmeyeceğiz J'ler kod, kendimizi sadece genel yorumlarla sınırlayacağız. Programlamaya ilgi duyanlar için tavsiye edebilirim. J'ler

Bu hat $ (". menuBurger"). on ("tıkla", işlev () ( bir sınıfa sahip bir öğeye tıklama olayını izler .menuBurger.

$ (". menü"). slideToggle (200, fonksiyon () ( burada fonksiyon menünün kendisine uygulanır slaytGeçiş (), sayfadaki seçili öğeleri 200 milisaniye içinde dönüşümlü olarak genişletir veya daraltır.

$ (bu) .removeAttr ("stil");- kaldırır Çizgide stiller görüntü yok;

Şimdi tıklandığında hamburger menüsü genişler ve daraltır, ancak bir sorun var, menüyü genişletirken sitenin ana içeriğini aşağı kaydırır ve içeriğin üstünde ise doğru şekilde. Aynı zamanda, özellikle mobil İnternet'te sayfa yükleme hızı düşer.

6. Menüyü içerik üzerinden genişletme

Bu sorun, menü konumlandırma kullanılarak çözülür.

Çoğunlukla CSS kodun eklenmesi gerekiyor

Menü (
pozisyon: göreceli;
}

Medya sorgusunda: .menu (
arka plan: #eee;
pozisyon: mutlak;
}

Daha sonra, hamburger menüsü ana içerik üzerinde açılacak. Öyle olmalı.

CSS'de hamburger menüsü

1. Tüm komut dosyalarını devre dışı bırakın ve silin

2. İçine yerleştirin HTML etiketler arasında dosya div ve ul kod satırı

3. Etiketi değiştirin div sınıf ile .menuBurgerüzerinde etiket

4. Kravat kimlik girişi nitelik ile etiket için karşısında #menuCSS

Sonuç olarak, simgeye tıkladığınızda hamburger menüsü, onay kutusunda bir onay işareti görünür.

5. Medya sorgusuna bir sözde sınıf ekleyin kontrol

#menuCSS: işaretlendi (
görüntü yok;
}

Bu, simgeye tıkladığınızda, onay kutusunun onay kutusuna konulduğu, ancak ekranda gizlendiği, yalnızca simgenin göründüğü anlamına gelir. Buradaki fikir, onay kutusu işaretli değilse menü kapatılır ve işaretlenirse menünün genişletilmesidir. Menünün açılması ve kapanması ile olay, onay kutusunun durumunda askıya alınır.

6. Gizle giriş v CSS

#menuCSS (
görüntü yok;
}

7. Paragraf 5'teki kodu değiştirin, aşağıdakiler için yukarıdaki makaleye bakın

#menuCSS: işaretli + .menu (
Ekran bloğu;
}

arasındaki bağlantı ise etiket ve #menuCSS girişi işaretli (kontrol), ardından menü genişletilir. Bütün sihir bu hamburger menüsü temiz'de çalışıyor CSS ve buna düzgün bir animasyon eklerseniz, menüden hiçbir fark yoktur. J'ler, hissetmeyeceksin.

Tarayıcıyı küçültmeyi deneyin ve nasıl çalıştığını açıkça göreceksiniz. css hamburger menüsü

Çıktı

Her iki seçenek de çalışıyor. Menü açık J'ler, diyelim ki - kodu kullanma açısından doğru. Menü açık CSS- bu bir "koltuk değneği", bir tür "yaratıcılık", anlamak istemeyenler için çok uygun J'ler ve bunu sadece projelerinde uygulayacak. Ismarlama siteler için "koltuk değneği" yok, daha fazla kullanım için keskinleştirilmiş bir düzen oluşturmanızı şiddetle tavsiye ederim J'ler, diğer uzmanlar.

Muhtemelen, bir hamburger menüsünün üç kısa satırı hakkında makaleler okumaktan ve sürekli farklı tartışmaları dinlemekten bıktınız. Bu arayüz tasarımında kötü bir numara mı? Yoksa kötü değil mi? Bu gönderi böyle değil - bu menünün iyi mi kötü mü olduğuna karar vermeyecek. Sonuç olarak, bunun zaten en iyi tasarım çözümü olduğunu düşünmüyorum. Ama hamburger menüsünün kendine has bir menüsü var. güçlüözellikle alanın sınırlı olduğu mobil tasarımda kullanıldığında. Öyleyse ne yapabiliriz? Hamburger menüsünü tüm kusurlarına rağmen olduğu gibi kabul edin ve devam edin? Pek çok site ve uygulama bununla uzlaşmış gibi görünüyor. Ve en iyisini yapabileceğimi düşünüyorum.

Ve sonra fikrimi değiştirmeme neden olan iki şey oldu. İlk olarak, tökezledim. Bu, bir hamburger menüsü kullanmanın etkilerini anlamanıza gerçekten yardımcı olan bir makaledir. Özellikle böyle bir menüye sahip siteler, kullanıcı etkileşiminde ciddi bir düşüş yaşıyor. Bu tür istatistiklerin gözden geçirilmesi, fikrimi değiştirmeye başladı.

Bir sonraki olay, böyle bir menüye sahip yeni bir web uygulamasını kullanmaya çalışan bir meslektaşımı izlerken oldu. Bu, hamburger menü arayüzüne çok aşina olan bir geliştiriciydi, ancak uygulamayı kendi ihtiyaçları için kullanmaya geldiğinde yüksek sesle "Oraya nasıl gidebilirim?" Diye sordu. Düşünün, bu tanıdığım en zeki insanlardan biri ve hamburger menü simgesine dokunmayı bile düşünmedi. Çok akıllı birinin navigasyon sorunları varsa, bu tipik kullanıcı hakkında ne diyor? Benim fikrim sonunda sağlam bir temel kazandı.

bir çözüm bulma

Hamburger menüsünün gücüne inanmamamın sebepleri bu kadar yeter artık çözüm hakkında konuşmanın zamanı geldi. Başlangıç ​​olarak, bir hamburger menüsü kullanmanın belirli faydalarını araştırdım:

  • ölçeklenebilirlik: Bu, muhtemelen bu kadar çok site ve uygulamanın onu seçmesinin ana nedeni ve ana nedenidir. Küçük bir simgenin arkasına çok sayıda gezinme öğesi koyabilirsiniz.
  • Kesinlik: Bu, ölçeklenebilirlikle birlikte gider, ancak aynı şey değildir. Tasarımcılar, ana içerik için yeterli alan bırakırken temiz ve düzenli tasarımlar oluşturmak isterler. Bir hamburger menüsü kullanmak, herhangi bir tasarımcıya hitap eden bir görsel sadelik duygusu verir.

Ve hamburger menüsüne bir alternatif oluşturacaksak, bununla ilgili sorunları bir şekilde çözmesi gerekiyor:

  • anlaşılırlık: Özellikle ürünü ilk kez kullananlar için navigasyon elemanlarını kolayca bulabilmeli.
  • katılım: arayüz, kullanıcının ürünle neler yapabileceğini ve belirli özellikleri ne zaman kullanmanın uygun olduğunu açıklayan ipuçları ve geri bildirim sağlamalıdır.

Zor kısım: mobil

En zor problemle başlamaya ve çözümümün mobil tasarımlar için işe yarayıp yaramayacağını görmeye karar verdim. Tonlarca fikir üzerinde düşündükten sonra, iOS sekme çubuğu menüsünün mobil arayüzler için en iyi çözümlerden biri olduğu sonucuna vardım. Pek çok kişi sekme çubuğunu kaydırılabilir hale getirmeye çalıştı (beşten fazla seçeneği barındıracak şekilde) veya gezinmeye "daha fazlasını" ekledi - hızlı bir şekilde gereksiz şeylerle dolacak fazladan bir odaya sahip olan Plyushkin gibi bir şey. Ayrıca, bu seçeneklerin her ikisi de hala ana gereksinimi karşılamıyor - netlik, tüm özelliklerin görünürlüğü eksik. Peki bunu düzeltmek için sekme menüsü ile ne yapabilirsiniz?

Benim çözümüm, hamburger ve sekme çubuğunu tek bir yaklaşımda birleştirmek. Sonuç, her menü öğesi için bir dizi seçeneği açan bir sekme çubuğudur.

Yaklaşımımı eylem halinde göstermek için bir takım performans testi uygulaması oluşturdum. Bu yöntemi kullanarak, kullanıcı ürünü kullanmanın ana fonksiyonlarını ve yollarını açıkça görebilir. Ve uykuya dalmak yerine tam liste hamburger simgesinin arkasına gizlenmiş olarak, kullanıcıya tıkladığı sekmeyle ilgili çeşitli seçenekler gösterilir. Navigasyonun anlaşılması ve sindirilmesi daha kolaydır, ihtiyacınız olan her şey her zaman elinizin altındadır, kullanıcının uygulamanın hiyerarşisini görmesini sağlar.

Bu tasarımın bir başka artısı, bağlamsal bildirimleri kullanma yeteneğidir. Bir hamburger menüsü söz konusu olduğunda, bu bildirimleri gösterebileceğiniz tek bir yeriniz var. Bir sekme çubuğu düzenine bağlı kalırsanız, seçilen menü öğelerinin herhangi birinde kullanıcıya istemler verebilirsiniz.

Tabii ki, bu yaklaşımın en büyük kazancı Ölçeklenebilirliktir. Evet, hala beş kategoriyle sınırlısın, ama bu iyi bir şey. Dürüst olmak gerekirse, tasarımcı gezinmeyi akıllıca düşünürse, herhangi bir sitenin seçeneklerini beş kategoriye sığdırabileceğini düşünüyorum. Gerçekten de, bu kategorilerin her birinde beş veya altı alt öğe daha olabilir.
Kullanıcı için bunalmış hissetmeden ve tüm ekran alanını işgal etmeden toplam 30 olası gezinme seçeneği elde edilir.

Tabletlere uygulama

Garip göründüğü için böyle bir sekme çubuğunun tabletlere entegrasyonu. Tabletler çok daha geniştir ve tabletlerle aynı kullanıcı arayüzünü kullanır. mobil cihazlar uzun zaman önce çıkarmış olduğu kıyafetler içinde bir genç kadar gülünç görünüyordu. Bu yüzden diğer tarafa gittim. Sekme çubuğunu en alta yerleştirmek yerine yan tarafa yerleştirdim. Ekran alanı kullanımı açısından daha uygun olduğu ortaya çıktı ve çok doğal görünüyordu. Ek olarak, birçok kullanıcı tableti yanında tutuyor, bu yüzden parmakla dokunma için hedef alan burası.

Peki ya masaüstü?

Hazır olun ... bir açılır menü. Bu doğru - bir masaüstü arayüzü için bu yaklaşımı deneyin ve inkar edilemez bir gerçekle karşı karşıya kalacaksınız: bu seçenek hiç de yeni değil. Kaydırmalı menü yıllardır var ve hemen hemen herkes (anneniz bile) nasıl çalıştığını biliyor. Bu, bu yaklaşımın güzelliği - yeni bir şey değil.


Tam açıklama

Bu şeye ne denir bilmiyorum. Sekmeli çekmece? Veya TABurger (TAB “sekme” + burger)? Ayrıca, daha önce benzer bir çözüm yaratan var mı bilmiyorum. Böyle bir menünün sadeliği göz önüne alındığında, ilk olduğum düşüncesini kabul edemem. Birkaç uygulamanın bazı sekme düğmelerinde (Tweetbot gibi) kayar menüler kullandığını biliyorum, ancak bunlar genellikle şu şekilde uygulanır: hızlı erişim gezinme hiyerarşisini artırmak amacıyla değil, ileri düzey kullanıcılar için işlevlere. Böyle bir örneğiniz varsa, yorumlarda bana bildirin.
Böyle bir menünün yeni olması veya uzun süredir icat edilmiş olması önemli değil. Önemli olan bir hamburger menüsüne kıyasla daha iyi, daha yaratıcı bir navigasyon çözümü olup olmadığıdır. Kendinize “Bu harika sitede bu menü var, bu yüzden en iyisi olmalı” veya “Herkes yapıyor, bu yüzden doğru” demeyi bırakın. Tasarım daha iyi, daha düşünceli bir yaklaşımı hak ediyor.
GÜNCELLEMELER
Colleen Eberhardt, Twitter'da aynı kullanıcı arayüzünün Windows Telefon... ben kendim windows kullanıcısı Telefon ve o haklı. Bu tür bir etkileşim Windows Phone'da yalnızca sekme çubuğundaki "daha fazla" seçeneği için kullanılmasına rağmen.

James Perich Twitter'da başka bir örnek verdi. Arthur Hemmer tarafından oluşturulan AHTabBarController'a bir göz atın.

Herhangi bir yol levhası gibi basit, işlevsel, sezgisel ve akılda kalıcı olan hamburger simgesi geçen yıl gerçek bir trend haline geldi ve herhangi bir modern web sitesi ve mobil uygulama tasarımının ayrılmaz bir parçası oldu.

Bu basit simge, küçük ekranlı cihazlar ve görselin önemli olduğu ve navigasyonun devre dışı bırakılması gereken web siteleri için mükemmel bir menü listesinin görünümünü ve hissini taklit eder. Günümüz dünyasının taleplerini karşılayan son derece etkili ve uygulanabilir bir çözümdür.

Diğer herhangi bir arayüz öğesi gibi, hamburger simgesi de her bir projenin ihtiyaçlarına göre orijinal versiyondan bazı sapmalara sahip olabilir.

Projeye ve temaya bağlı olarak hamburger ikonu, tasarımı tamamlayan birçok form alabilir veya kendi ayırt edici özelliği haline gelebilir.

Bugünün koleksiyonu 20 içerir farklı varyasyonlar hamburger simgeler.

Tasarımcı Dave Games'in hamburger ikonu anında çok fazla sıcak enerji veriyor. Çizgi film stili, oyunculuğu ekler ve yalnızca en olumlu duyguları yaratır. Bu simgeyi en modern resimli arabirimlerde güvenle kullanabilirsiniz.

Bu okyanus dalgası simgesi Matt Walker tarafından tasarlandı. Denize adanmış çeşitli projelerde kendini harika hissedecek. Ana renk olarak açık mavi ve etrafındaki kenarlık, bu rozeti özel kılar.

Temiz, canlı ve esprili bir uygulama, bu yapının mutfak sitelerinde bir menü simgesi gibi çalışmasına izin verecektir. Bu durumda, arayüz güzel bir sanatsal bükülme alacaktır.

Tasarımcı, tutkuyla hazırlanmış hamburger rozetlerinin 10 ilginç versiyonunu sunuyor. Seri, farklı burger türlerini kapsar: biri peynirli, diğeri domuz pastırmalı, üçüncüsü hindili ve diğerleri. Bir web siteniz varsa veya mobil uygulama bir fast food restoranına adanmış, kesinlikle işe yarayacaklar. Görsel olarak o kadar ilginçler ki hemen hemen her konuda yer bulabilirler.

Ve bu proje gerçekçi bir vektör hamburger sunuyor. Bu durumda kapatma düğmesi, soslu veya sossuz "X" şeklini alan patates kızartması şeklinde yapılır. Bu, sayfa tasarımınıza egzotizm katabilecek yaratıcı bir çözümdür.

Resmi site Yıldız Savaşları dönen ilginç bir hamburger simgesi içerir. Lazer kılıçlarının ışık yansıması vektörünü elde etmek için her çizgi iki parçaya bölünmüştür. Çözüm güçlendiriyor Genel izlenim siteden alır ve markayı güçlendirir.

Peter Twauri'nin Burger Menüsü, simgenin güzel bir şekilde resimlenmiş bir versiyonudur. Anahtar özellik Bu simge, kesilmiş bir çörek ve et pirzolasını taklit eden bir dizi renkten oluşur.

Seri, çizgi stili ile hayata geçirilen hamburger çeşitlerine sahiptir. Burada duble hamburger, peynirli ve salatalı hamburger, açık sandviç ve birkaç tane daha bulacaksınız. Düzgün, düz arayüzünüz için mükemmel çözümü bulmak, baharat ve lezzet katmak için kolay olacaktır.

Sanatçı, düğmenin üç eğlenceli versiyonunu sergiliyor: klasik hamburger, çizburger ve sosisli sandviç. Her biri bir veya iki renge dayalıdır, bu da onu çeşitli küçük arayüzler için uygun hale getirir. Burada renk, doğru türde bir sandviç yaratır.

Sanatçı, yalnızca bir menü simgesi ve normal bir "X" (kapat düğmesi) dönüşümüne eşlik eden birkaç yumuşak geçiş içeren küçük bir animasyon sunar. Fare hareket ettirildiğinde veya basıldığında ortaya çıkan özel efektler vardır.

Yukarıdaki örneklerin çoğundan farklı olarak, bu örnek, renkten ziyade ağırlığın ustaca manipülasyonunu göstermektedir. Üst ve alt çizgiler ortadan daha cesur ve doğru hamburger görünümünü oluşturuyor. Sanatçı görevle başarıyla başa çıktı.

Andrew Kovardakov'un ninja ikonu animasyon menüsü, çoğu hamburger düğmesinden farklıdır ve gizemli ve çekici bir alt metinle ilginç ve alışılmadık bir çözüm sunar. Burada her satır bir vektör ninjadır.

Ve bu simge bir salata ve peynirli burgerin bir örneğidir. Herhangi bir sıkıcı arayüze lezzet katabilir. Bir restoran veya kafe web sitesi için mükemmel bir çözüm.

Bu, modaya uygun menü simgesi hakkında bazı ilginç nedenler bulabileceğiniz makaledir. Hamburger düğmesinin üç varyasyonunu gösteren bir resimle işaretlenmiştir. Birincisi birinci sınıf bir düz illüstrasyon, ikincisi renkli üç satırlı bir simge ve üçüncüsü, tasarımcılar arasında en popüler seçim olan ikincisinin tek renkli bir versiyonu.

GIF gösterileri yumuşak geçişler arasında başlangıç ​​hali bu minimalist ve zarif ikonun son hali. Animasyon alt satırdan başladığı için diğerlerine göre daha kısadır.

Liam Spradlin'in hamburger menüsü, kitaplar için bir dizi okul yer işaretine benziyor. Bu uygulama cesur ve biraz kaba. Böyle bir simge hemen fark edilir, ancak bunun için uygun bir ortam bulmak zor olabilir.


Şimdiye kadar simgelere ayrı ayrı baktık, ancak özellikle kelime "Menü" olduğunda, kelimelerle iyi çalışırlar. Abartılı görünse de, birlikte sofistike görünüyorlar. Bu durumda kullanılan 1 piksel ultra ince çizgiler, yapboz parçaları gibi birbirine uyuyor.

Proje, bir hamburger simgesinin çerçevelendiğinde daha parlak ve çekici görünebileceğini kanıtlıyor. için harika bir seçimdir. küçük cihazlar böyle bir simgenin dokunmatik navigasyon için uygun olduğu yerler.

Tasarımcı, çeşitli metamorfozlardan geçerek haç veya oka dönüşen basit, şık üç çizgili bir simge görüntüler. Animasyon, herhangi bir proje için kullanışlı olabilecek çeşitli çözümler içerir.

sonuçlar

İlk bakışta, menü simgesi gibi küçük şeylere çok fazla dikkat edilmemesi gerektiği görünebilir. Ancak biraz hayal gücü gösterirseniz, bunu arayüzünüz için bir çeşit lezzete dönüştürebilirsiniz. Özellikle geliştiriciler anlamı ile oynamaya başlarlarsa ve daha alışılmadık ve göz alıcı hale getirmek için sanatsal hileler kullanırlarsa.