Ikona hamburgera: novi načini korištenja. Brzo kreirajte meni za hamburger koristeći jQuery. Dodajte osnovne CSS stilove

2. Umetnite ikonu hamburgera u navigacijski meni

Na sajtu iconfinder.com pronađite željenu ikonu, promijenite boju u željenu (ikona za uređivanje), preuzmite u formatu SVG, otvorite ga u pretraživaču, kopirajte kod iz web inspektora.

Zalijepite gore kopirani kod umjesto teksta "Meni".

U ovoj fazi, na desktop rezolucijama meni izgleda ovako: SVG Ikonicu smo sakrili pisanjem sljedećeg koda.

MenuBurger (
prikaz: nema; /* ikona hamburgera je skrivena */
}

3. Idite na medijski upit

Na maloj širini ekrana, od nula do 530 piksela. Moramo učiniti suprotno, pokazati ikonu hamburger meni i sakrijte sve stavke menija zaredom.

@medijski ekran i (maks. širina: 530px) (
.meni (
prikaz: nema; /* stavke menija su skrivene */
pozadina: #f1f2f4;
pozicija: apsolutna;
}

Meni (
float: nema; /* stavke menija u kolonama */
}

MenuBurger (
prikaz: inline-block; /* ikona hamburgera vidljiva */
}
}

4. Proširite meni hamburgera

Šta učiniti prije otvaranja hamburger meni? Potrebno je privremeno komentirati CSS kod medijskog upita /* prikaz: nema; */ i pretvorite horizontalni meni u vertikalni. Da bismo to učinili, poništimo akciju float, dodajte sljedeći kod u medijski upit.

Vjerovatno ste se već umorili od čitanja članaka i stalnog slušanja raznih rasprava o tri kratka reda menija za hamburger. Je li ovo loša tehnika dizajna korisničkog sučelja? Ili nije loše? Ovaj post je drugačiji - neće suditi da li je ovaj meni dobar ili loš. Poenta je da ja ne mislim da je to najbolja dizajnerska odluka, na ovaj ili onaj način. Ali meni za hamburger ima i svoje prednosti, posebno kada se koristi u mobilnom dizajnu, u uslovima ograničenog prostora. Dakle, šta možemo učiniti? Samo prihvatite jelovnik hamburgera kakav jeste, uprkos svim nedostacima, i nastavite sa svojim životom? Čini se da su se mnoge web stranice i aplikacije pomirile s ovim. I vjerujem da sam sposoban za najbolje.

A onda su se dogodile dvije stvari koje su me natjerale da se predomislim. Prvo sam naišao na . Ovo je članak koji zaista pomaže razumjeti implikacije korištenja jelovnika za hamburger. Konkretno, sajtovi sa takvim menijima trpe ozbiljno smanjenje angažovanja korisnika. Pregled takve statistike je upravo počeo da mijenja moje mišljenje.

Sljedeći incident se dogodio kada sam promatrao kolegu kako pokušava koristiti novu web aplikaciju koja je imala upravo takav meni. Ovo je bio programer koji je bio veoma upoznat sa interfejsom menija za hamburger, ali kada je u pitanju korišćenje aplikacije za njegove potrebe, glasno je pitao: „Kako da stignem tamo?“ Imajte na umu, ovo je jedan od najpametnijih ljudi koje poznajem, a nije ni pomislio da dodirne ikonu menija za hamburger. Ako neko tako pametan ima problema sa navigacijom, šta to govori o tipičnom korisniku? Moje mišljenje je konačno dobilo čvrstu osnovu.

Pronalaženje rješenja

Eto, dosta o razlozima moje nevjerice u moć hamburger menija – vrijeme je za razgovor o rješenju. Prvo sam pogledao konkretne prednosti korištenja menija za hamburger:

• Skalabilnost: Ovo je vjerovatno glavni plus i glavni razlog zašto ga toliko stranica i aplikacija bira. Možete postaviti mnogo navigacijskih elemenata iza male ikone.
• Preciznost: ovo ide ruku pod ruku sa skalabilnosti, ali još uvijek nije ista stvar. Dizajneri žele kreirati koncizan i uredan dizajn, ostavljajući dovoljno prostora za glavni sadržaj. Korištenje menija za hamburger daje osjećaj vizualne jednostavnosti koji je privlačan svakom dizajneru.

A ako želimo da kreiramo alternativu jelovniku za hamburger, on mora nekako da reši probleme povezane sa njim:

• Razumljivost: Elementi za navigaciju bi trebali biti lako pronađeni, posebno onima koji prvi put koriste proizvod.
• Veridba: Interfejs bi trebao pružati savjete i povratne informacije koje objašnjavaju šta korisnik može učiniti s proizvodom i kada je prikladno koristiti određene funkcije.

Teški dio: mobilni

Odlučio sam početi s najtežim problemom i vidjeti hoće li moje rješenje funkcionirati za mobilne dizajne. Nakon što sam razmislio o gomili ideja, došao sam do zaključka da je iOS tab bar meni jedno od najboljih rješenja za mobilna sučelja. Mnogi ljudi su pokušali napraviti traku s karticama koja se može pomicati (da stane više od pet opcija) ili dodati „više“ u navigaciju – nešto poput Pljuškina, koji ima dodatnu prostoriju koja će se brzo napuniti smećem. Takođe, obe ove opcije i dalje ne ispunjavaju osnovni uslov - nedostaje jasnoća, vidljivost svih mogućnosti. Dakle, šta možete učiniti sa menijem kartica da to popravite?

Moje rješenje je kombinirati hamburger i tab bar u jedan pristup. Rezultat je traka kartica koja otvara skup opcija za svaku stavku menija.

Napravio sam aplikaciju za testiranje timske produktivnosti da ilustriram svoj pristup na djelu. Koristeći ovu metodu, korisnik može jasno vidjeti glavne funkcije i namjene proizvoda. I umjesto da bude bombardiran kompletnom listom stavki menija skrivenih iza ikone hamburgera, korisniku se prikazuje nekoliko opcija koje se odnose na karticu na koju je kliknuo. Ovo čini navigaciju lakšom za razumijevanje i varenje, sve što vam je potrebno je uvijek pri ruci i omogućava korisniku da vidi hijerarhiju aplikacije.

Još jedna prednost ovog dizajna je mogućnost korištenja kontekstualnih obavijesti. U slučaju menija za hamburger, imate samo jedno mjesto za prikaz ovih obavještenja. Ako se držite rasporeda trake s karticama, možete dati savjete korisniku za bilo koju stavku menija koju odabere.

Naravno, najveća pobjeda ovog pristupa je skalabilnost. Da, i dalje ste ograničeni na pet kategorija, ali to je dobra stvar. Iskreno, mislim da svaka stranica može svoje opcije uklopiti u pet kategorija ako dizajner mudro razmišlja o navigaciji. Uostalom, u svakoj od ovih kategorija može biti još pet ili šest podtačaka.
Ukupno, postoji 30 mogućih opcija navigacije bez osjećaja preopterećenosti za korisnika i bez zauzimanja cijelog prostora na ekranu.

Aplikacija za tablete

Integracija takve trake kartica u tablete izgleda čudno. Tableti su mnogo raznovrsniji, a korištenje istog korisničkog sučelja kao mobilnih uređaja izgledalo je nezgodno kao tinejdžer u odjeći koju je odavno prerastao. Pa sam krenuo drugim putem. Umjesto da postavim traku s karticama na dno, stavio sam je sa strane. Ovo se pokazalo praktičnijim u smislu korištenja prostora na ekranu i izgledalo je vrlo prirodno. Osim toga, mnogi korisnici drže tablet sa strane, tako da je ovo ciljno područje za dodir prstima.

Šta je sa desktopom?

Pripremite se...izvlačeći meni. Tako je - isprobajte ovaj pristup na desktop interfejsu i suočićete se sa neospornom realnošću: ova opcija uopšte nije nova. Klizni meniji postoje godinama i skoro svako (čak i vaša mama) zna kako to funkcioniše. Ovo je ljepota ovog pristupa - ništa novo.

Potpuno otkrivanje

Ne znam kako da nazovem ovu stvar. Inlay klizač? Ili TABurger (TAB “tab” + burger)? Štaviše, ne znam da li je neko ranije kreirao slično rešenje. S obzirom na jednostavnost ovakvog menija, ne mogu podnijeti da pomislim da sam ja prvi. Znam da nekoliko aplikacija koristi klizne menije na nekim dugmadima kartica (kao što je Tweetbot), ali su obično dizajnirane kao brzi pristup funkcijama za napredne korisnike, a ne kao način da se izgradi hijerarhija navigacije. Ako imate takav primjer, javite mi u komentarima.
Nije bitno da li je takav meni nov ili davno izmišljen. Ono što je bitno je da li je to bolje, kreativnije rješenje za navigaciju od menija za hamburger. Prestanite da govorite sebi „Ova kul stranica ima ovaj meni, pa mora da je najbolji“ ili „Svi to rade, pa mora da je ispravno“. Dizajn zaslužuje bolji, promišljeniji pristup.
AŽURIRANJA
Collin Eberhardt je na Twitteru naveo da je isti korisnički interfejs implementiran u Windows Phone. I ja sam korisnik Windows Phone-a i on je u pravu. Iako se ova vrsta interakcije koristi u Windows Phone samo za opciju „više“ na traci kartica.

James Perich je na Twitteru naveo još jedan primjer. Pogledajte AHTabBarController koji je kreirao Arthur Hemmer.

Jednostavna, funkcionalna, intuitivna i pamtljiva, kao i svaki putokaz, ikona hamburgera postala je pravi trend prošle godine i sastavni element svakog modernog dizajna web stranice i mobilne aplikacije.

Ova jednostavna ikona oponaša izgled liste menija, idealna za uređaje sa malim ekranom i veb lokacije gde su vizuelni elementi važni, a navigaciju treba držati po strani. Ovo je veoma efikasno i održivo rešenje koje zadovoljava zahteve savremenog sveta.

Kao i svaki drugi element interfejsa, ikona hamburgera može imati neka odstupanja od originalne verzije, na osnovu potreba svakog pojedinačnog projekta.

Ovisno o projektu i temi, ikona hamburgera može poprimiti različite oblike koji nadopunjuju dizajn ili mogu postati njegova vlastita prepoznatljiva karakteristika.

Današnja kolekcija uključuje 20 različitih varijacija ikone hamburgera.

Ikona hamburgera dizajnera Dave Gamesa odmah odaje mnogo tople energije. Crtani stil dodaje razigranost i stvara samo najpozitivnije emocije. Takvu ikonu možete bezbedno koristiti na većini modernih ilustrovanih interfejsa.

Ovu ikonu okeanskog talasa dizajnirao je Mat Walker. Odlično će se osjećati na raznim projektima posvećenim moru. Svijetloplava kao glavna boja i obrub oko nje čine ovu značku ekskluzivnom.

Čista, svijetla i duhovita implementacija omogućit će ovom dizajnu da radi kao ikona menija na web lokacijama za kuhanje. U ovom slučaju, interfejs će dobiti prijatan umetnički zaokret.

Dizajner nudi 10 zanimljivih verzija ikona hamburgera, koje su rađene s dušom. Serija pokriva različite vrste hamburgera: jedan sa sirom, drugi sa slaninom, treći sa ćurkom i mnoge druge. Ako imate web stranicu ili mobilnu aplikaciju posvećenu restoranu brze hrane, onda će vam sigurno dobro doći. Toliko su vizuelno zanimljivi da mogu naći mjesto u gotovo svakoj temi.

I ovaj projekat predstavlja realističan hamburger u vektoru. Dugme za zatvaranje je napravljeno u obliku pomfrita, u obliku slova „X“, sa ili bez sosa. Ovo je kreativno rješenje koje može dodati egzotičnost dizajnu stranice.

Zvanična web stranica Ratova zvijezda uključuje zanimljivu ikonu hamburgera koja se okreće. Svaka linija je podijeljena na dva dijela kako bi se dobio vektor refleksije svjetlosti laserskih mačeva. Rješenje poboljšava cjelokupni dojam stranice i jača brend.

Burger Menu od Petera Twauryja je prekrasno ilustrovana verzija ikone. Ključna karakteristika ove ikone je izbor boja koje oponašaju rezanu lepinju i mesnu pljeskavicu.

Serija ima različite opcije hamburgera, koje su implementirane pomoću stila linije. Ovdje ćete pronaći dupli hamburger, hamburger sa sirom i zelenom salatom, otvoreni sendvič i nekoliko drugih. Pronalaženje savršenog rješenja za vaš uredan, ravan interfejs će biti lako dodati ukus i štih.

Umjetnik demonstrira tri zabavne verzije gumba: klasični hamburger, cheeseburger i hot dog. Svaki je baziran na jednoj ili dvije boje, što ga čini pogodnim za niz malih interfejsa. Ovdje boja stvara pravi izgled za sendvič.

Umetnik nudi malu animaciju koja uključuje samo jednu ikonu menija i nekoliko glatkih prelaza koji prate transformaciju u običan "X" (dugme za zatvaranje). Postoje posebni efekti koji se javljaju kada pređete mišem ili kliknete.

Za razliku od većine gornjih primjera, ovaj primjer pokazuje vještu manipulaciju težinom, a ne bojom. Gornja i donja linija su hrabrije od sredine i stvaraju pravi izgled "hamburgera". Umjetnik je uspješno obavio zadatak.

Animacija menija ikone nindže Andrewa Kovardakova razlikuje se od većine dugmadi za hamburger, te nudi zanimljivo i izvanredno rješenje, sa misterioznim i atraktivnim prizvukom. Ovdje je svaka linija nindža u vektoru.

A ova ikona je ilustracija hamburgera sa zelenom salatom i sirom. Može dodati polet svakom dosadnom interfejsu. Odlično rješenje za web stranicu restorana ili kafića.

Ovo je članak u kojem možete pronaći zanimljive rasprave o trendovskoj ikoni menija. Označen je slikom koja prikazuje tri varijacije dugmeta za hamburger. Prva je vrhunska ravna ilustracija, druga je obojena ikona s tri linije, a treća je monokromatska verzija drugog dizajna - najpopularniji izbor među dizajnerima.

GIF prikazuje glatke prelaze između početnog stanja ove minimalističke i elegantne ikone i njenog konačnog stanja. Pošto animacija počinje od donje linije, kraća je od ostalih.

Jelovnik hamburgera Liama ​​Spradlina izgleda kao skup školskih oznaka. Ova implementacija je hrabra i pomalo gruba. Ova ikona je odmah uočljiva, međutim, može biti teško pronaći pravo okruženje za nju.

Do sada smo ikone posmatrali odvojeno, ali one dobro rade sa rečima, posebno kada je reč „Meni“. Iako se može činiti pretjeranim, zajedno izgledaju sofisticirano. Ultra tanke 1px široke linije korištene u ovom slučaju uklapaju se zajedno kao dijelovi slagalice.

Projekt dokazuje da ikona hamburgera može izgledati svjetlije i privlačnije kada je uokvirena. Ovo je odličan izbor za male uređaje gdje će takva ikona biti zgodna za navigaciju dodirom.

Dizajner prikazuje jednostavnu, elegantnu ikonu u tri reda koja prolazi kroz različite metamorfoze da bi postala križ ili strelica. Animacija uključuje nekoliko rješenja koja mogu biti korisna za svaki projekat.

Rezultati

Na prvi pogled može izgledati da tako mala stvar kao što je ikona menija nije vrijedna pažnje. Ali ako pokažete malo mašte, možete to pretvoriti u neku vrstu vrhunca vašeg interfejsa. Pogotovo ako programeri počnu da se poigravaju sa njegovim značenjem i koriste umjetničke tehnike kako bi ga učinili nekonvencionalnijim i privlačnijim.

Zdravo svima. Corvax je sa vama. Danas želim da nastavim temu mobilnih menija i pozivam vas da to uradite, ali samo koristeći jQuery. Idi.

Kreiranje HTML izgleda

Dodavanje osnovnih CSS stilova

Dodavanje JS

Nakon što smo kreirali sam meni, potrebno je da povežemo JS fajl i pređemo na najzanimljiviji deo.

$(function())( $(".menuToggle").on("click", function() ( $(".menu").slideToggle(300, function())( if($(this).css (" display") === "none")( $(this).removeAttr("style"); ) ));

Pogledajmo bliže šta je ovde napisano. Na početku informacije okačimo klikom na samo dugme „Meni“. Unutar ovog događaja dodajemo funkciju slideToggle() u $(.menu”) padajući meni, koji će glatko otvarati i zatvarati padajući meni.

Postoji mali problem koji ćemo imati prilikom prebacivanja verzija sajta i klika na dugme “Meni”, naime, blok sa samim stavkama menija biće sakriven jer Podrazumevano, funkcija slideToggle() dodaje atribut “display: none” prilikom zatvaranja. Da biste popravili ovu grešku, morate pozvati povratni poziv (funkciju koja će biti pozvana nakon obrade glavne funkcije) za funkciju slideToggle(). Unutar povratnog poziva pišemo uslov. Ako imamo atribut u bloku menija jednak “display: none” onda uklanjamo atribut “style”.

Zaključak

Tako smo, vrlo jednostavno i brzo, kreirali prilagodljivi „hamburger“ meni koji možete lako koristiti u svojim projektima. možete preuzeti izvore. Corvax je bio s tobom. Da, novi sastanci!