Hamburgerikon: nya sätt att använda den. Skapa snabbt en hamburgermeny med jQuery Lägg till grundläggande CSS-stilar

2. Infoga en hamburgerikon i navigeringsmenyn

På plats iconfinder.com hitta önskad ikon, ändra färgen till önskad (Redigera ikon), ladda ner i format SVG, öppna den i webbläsaren, kopiera koden från webbinspektören.

Klistra in koden som kopierats ovan istället för "Meny"-texten.

I detta skede, på skrivbordsupplösningar, ser menyn ut så här: SVG Vi gömde ikonen genom att skriva följande kod.

MenuBurger (
display: ingen; /* hamburgerikon dold */
}

3. Gå till mediefrågan

På en liten skärmbredd, från noll till 530 pixlar. Vi måste göra tvärtom, visa ikonen hamburgermeny och dölj alla menyalternativ i rad.

@mediaskärm och (maxbredd: 530px) (
.meny (
display: ingen; /* menyalternativ är dolda */
bakgrund: #f1f2f4;
position: absolut;
}

Meny (
flyta: ingen; /* menyalternativ i kolumner */
}

MenuBurger (
display: inline-block; /* hamburgerikon synlig */
}
}

4. Utöka hamburgermenyn

Vad du ska göra innan du öppnar hamburgermeny? Det är nödvändigt att tillfälligt kommentera in CSS mediafrågekod /* display: ingen; */ och förvandla den horisontella menyn till en vertikal. För att göra detta, låt oss avbryta åtgärden flyta, lägg till följande kod i mediefrågan.

Du är förmodligen redan trött på att läsa artiklar och ständigt lyssna på olika diskussioner om tre korta rader av hamburgermenyn. Är detta en dålig UI-designteknik? Eller inte dåligt? Det här inlägget är annorlunda - det kommer inte att bedöma om den här menyn är bra eller dålig. Poängen är att jag inte tycker att det är det bästa designbeslutet, på ett eller annat sätt. Men hamburgermenyn har också sina styrkor, särskilt när den används i mobildesign, under förhållanden med begränsat utrymme. Så vad kan vi göra? Bara acceptera hamburgermenyn som den är, trots alla brister, och gå vidare med ditt liv? Många sajter och appar verkar ha kommit överens med detta. Och jag tror att jag är kapabel till det bästa.

Och så hände två saker som fick mig att ändra uppfattning. Först stötte jag på. Det här är en artikel som verkligen hjälper till att förstå konsekvenserna av att använda en hamburgermeny. I synnerhet webbplatser med sådana menyer drabbas av en allvarlig minskning av användarens engagemang. En granskning av sådan statistik började bara ändra min åsikt.

Nästa incident inträffade när jag observerade en kollega som försökte använda en ny webbapplikation som hade just en sådan meny. Det här var en utvecklare som var mycket bekant med hamburgermenygränssnittet, men när det kom till att använda applikationen för hans behov frågade han högt, "Hur kommer jag dit?" Det här är en av de smartaste människorna jag känner, och han tänkte inte ens på att röra hamburgermenyikonen. Om någon så smart har problem med att navigera, vad säger det om den typiska användaren? Min åsikt har äntligen fått en solid grund.

Att hitta en lösning

Det räcker med orsakerna till min misstro mot hamburgermenyns kraft – det är dags att prata om lösningen. Först tittade jag på de specifika fördelarna med att använda en hamburgermeny:

• Skalbarhet: Detta är förmodligen det främsta pluset och den främsta anledningen till att så många webbplatser och applikationer väljer det. Du kan få plats med många navigeringselement bakom en liten ikon.
• Noggrannhet: detta går hand i hand med skalbarhet, men fortfarande inte samma sak. Designers vill skapa kortfattade och snygga mönster och lämna tillräckligt med utrymme för huvudinnehållet. Att använda en hamburgermeny ger en känsla av visuell enkelhet som är attraktiv för alla designers.

Och om vi ska skapa ett alternativ till hamburgermenyn måste den på något sätt lösa problemen som är förknippade med den:

• Förstålighet: Navigationselement bör lätt kunna hittas, särskilt av de som använder produkten för första gången.
• Engagemang: Gränssnittet ska ge tips och feedback som förklarar vad användaren kan göra med produkten och när det är lämpligt att använda vissa funktioner.

Den knepiga delen: mobil

Jag bestämde mig för att börja med det svåraste problemet och se om min lösning skulle fungera för mobildesign. Efter att ha funderat över massor av idéer kom jag till slutsatsen att iOS-flikens meny är en av de bästa lösningarna för mobila gränssnitt. Många människor har försökt göra flikfältet rullningsbart (för att passa fler än fem alternativ) eller lägga till "mer" i navigeringen - något som Plyushkin, som har ett extra rum som snabbt fylls med skräp. Dessutom uppfyller båda dessa alternativ fortfarande inte huvudkravet - tydlighet, synlighet av alla möjligheter saknas. Så vad kan du göra med flikmenyn för att fixa detta?

Min lösning är att kombinera hamburgaren och tabbaren till ett enda tillvägagångssätt. Resultatet är en flikrad som öppnar en uppsättning alternativ för varje menyalternativ.

Jag skapade en teamproduktivitetstestapp för att illustrera mitt tillvägagångssätt i praktiken. Med denna metod kan användaren tydligt se produktens huvudfunktioner och användningsområden. Och istället för att bombarderas med en fullständig lista med menyalternativ gömda bakom en hamburgerikon, visas flera alternativ som relaterar till fliken de klickade på. Detta gör navigeringen lättare att förstå och smälta, allt du behöver finns alltid till hands och låter användaren se applikationshierarkin.

En annan fördel med denna design är möjligheten att använda kontextuella meddelanden. När det gäller en hamburgermeny har du bara ett ställe att visa dessa meddelanden. Om du håller fast vid en flikradslayout kan du ge tips till användaren om något av menyalternativen de väljer.

Naturligtvis är den största vinsten med detta tillvägagångssätt skalbarhet. Ja, du är fortfarande begränsad till fem kategorier, men det är bra. Ärligt talat, jag tror att vilken webbplats som helst kan passa in sina alternativ i fem kategorier om designern tänker igenom navigeringen klokt. När allt kommer omkring, i var och en av dessa kategorier kan det finnas fem eller sex ytterligare underpunkter.
Totalt finns det 30 möjliga navigeringsalternativ utan känslan av överbelastning för användaren och utan att uppta hela skärmutrymmet.

Applikation på surfplattor

Att integrera en sådan flikrad i surfplattor som det verkade konstigt. Surfplattor är mycket mer mångsidiga, och att använda samma användargränssnitt som mobila enheter såg lika besvärligt ut som en tonåring i kläder som han för länge sedan hade vuxit ur. Så jag gick en annan väg. Istället för att placera tabbaren i botten, placerade jag den på sidan. Detta visade sig vara mer praktiskt när det gäller att använda skärmutrymme och såg väldigt naturligt ut. Dessutom håller många användare surfplattan vid sidan, så detta är målområdet för fingerberöring.

Hur är det med skrivbordet?

Gör dig redo...utdragbar meny. Det stämmer - prova det här tillvägagångssättet på ett skrivbordsgränssnitt och du kommer att ställas inför en obestridlig verklighet: det här alternativet är inte alls nytt. Glidande menyer har funnits i flera år, och nästan vem som helst (även din mamma) vet hur det fungerar. Detta är det fina med detta tillvägagångssätt - inget nytt.

Full information

Jag vet inte vad jag ska kalla det här. Inläggsreglage? Eller TABurger (TAB "tab" + hamburgare)? Dessutom vet jag inte om någon har skapat en liknande lösning tidigare. Med tanke på enkelheten i en sådan meny orkar jag inte tro att jag var först. Jag vet att några appar använder utdragbara menyer på vissa flikknappar (som Tweetbot), men de är vanligtvis utformade som snabb åtkomst till funktioner för avancerade användare, inte som ett sätt att bygga upp en navigeringshierarki. Om du har ett sådant exempel, låt mig veta i kommentarerna.
Det spelar ingen roll om en sådan meny är ny eller länge har uppfunnits. Det som spelar roll är om det är en bättre, mer kreativ navigationslösning än en hamburgermeny. Sluta säga till dig själv "Den här coola sidan har den här menyn, så den måste vara den bästa" eller "Alla gör det, så det måste vara rätt." Design förtjänar ett bättre och mer genomtänkt tillvägagångssätt.
UPPDATERINGAR
Collin Eberhardt noterade på Twitter att samma användargränssnitt är implementerat i Windows Phone. Jag är själv en Windows Phone-användare och han har rätt. Även om denna typ av interaktion endast används i Windows Phone för alternativet "mer" i flikfältet.

James Perich gav ett annat exempel på Twitter. Ta en titt på AHTabBarController skapad av Arthur Hemmer.

Enkel, funktionell, intuitiv och minnesvärd, precis som vilken vägskylt som helst, hamburgerikonen blev en riktig trend förra året och en integrerad del av alla moderna webb- och mobilapplikationsdesign.

Den här enkla ikonen efterliknar utseendet på en menylista, perfekt för enheter med små skärmar och webbplatser där det visuella är viktigt och navigering måste hållas åt sidan. Detta är en mycket effektiv och hållbar lösning som uppfyller kraven i den moderna världen.

Som alla andra gränssnittselement kan hamburgerikonen ha vissa avvikelser från originalversionen, baserat på behoven för varje enskilt projekt.

Beroende på projekt och tema kan hamburgerikonen anta olika former som kompletterar designen eller kan bli ett eget särdrag.

Dagens kollektion innehåller 20 olika varianter av hamburgerikonen.

Hamburgerikonen från designern Dave Games avger genast mycket varm energi. Den tecknade stilen tillför lekfullhet och skapar bara de mest positiva känslorna. Du kan säkert använda en sådan ikon på de flesta moderna illustrerade gränssnitt.

Denna havsvågsikon designades av Mat Walker. Hon kommer att trivas bra i olika projekt dedikerade till havet. Den ljusblåa som huvudfärg och bården runt den gör detta märke exklusivt.

En ren, ljus och kvick implementering gör att den här designen fungerar som en menyikon på matlagningssajter. I det här fallet kommer gränssnittet att få en trevlig konstnärlig twist.

Designern erbjuder 10 intressanta versioner av hamburgerikoner, som är gjorda med själ. Serien täcker olika typer av hamburgare: en med ost, en annan med bacon, en annan med kalkon och många andra. Om du har en webbplats eller mobilapplikation dedikerad till en snabbmatsrestaurang, kommer de säkert att komma till nytta. De är så visuellt intressanta att de kan hitta en plats i nästan vilket tema som helst.

Och detta projekt representerar en realistisk hamburgare i vektor. Stängningsknappen är gjord i form av pommes frites, i form av ett "X", med eller utan sås. Detta är en kreativ lösning som kan lägga exotism till siddesignen.

Den officiella Star Wars-webbplatsen innehåller en intressant hamburgerikon som roterar. Varje linje är uppdelad i två delar för att erhålla reflektionsvektorn för lasersvärdens ljus. Lösningen förstärker helhetsintrycket av sajten och stärker varumärket.

Burger Menu av Peter Twaury är en vackert illustrerad version av ikonen. Det viktigaste med denna ikon är valet av färger som efterliknar den skurna bullen och köttfärsen.

Serien har olika hamburgeralternativ, som implementeras med linjestil. Här hittar du en dubbelhamburgare, en hamburgare med ost och sallad, en smörgås och flera andra. Att hitta den perfekta lösningen för ditt snygga, platta gränssnitt blir lätt att lägga till smak och känsla.

Konstnären visar tre roliga versioner av knappen: en klassisk hamburgare, en cheeseburgare och en korv. Var och en är baserad på en eller två färger, vilket gör den lämplig för en mängd olika små gränssnitt. Här skapar färgen den rätta looken för mackan.

Konstnären erbjuder en liten animation som bara innehåller en menyikon och flera mjuka övergångar som följer med omvandlingen till ett vanligt "X" (stängknapp). Det finns specialeffekter som uppstår när du för musen eller klickar.

Till skillnad från de flesta av exemplen ovan visar detta exempel skicklig manipulation av vikt snarare än färg. De övre och nedre linjerna är djärvare än mitten och skapar precis rätt "hamburger"-look. Konstnären slutförde uppgiften framgångsrikt.

Menyanimering av ninjaikonen från Andrew Kovardakov skiljer sig från de flesta hamburgerknappar och erbjuder en intressant och extraordinär lösning, med en mystisk och attraktiv överton. Här är varje linje en ninja i en vektor.

Och den här ikonen är en illustration av en hamburgare med sallad och ost. Det kan ge lite lust till alla tråkiga gränssnitt. En utmärkt lösning för en restaurang- eller caféwebbplats.

Det här är en artikel där du kan hitta intressanta diskussioner om den trendiga menyikonen. Den är markerad med en bild som visar tre varianter av hamburgerknappen. Den första är en platt premiumillustration, den andra är en färgad ikon med tre rader, och den tredje är en monokromatisk version av den andra designen - det mest populära valet bland designers.

GIF visar de mjuka övergångarna mellan det initiala tillståndet för denna minimalistiska och eleganta ikon och dess slutliga tillstånd. Eftersom animeringen börjar från den nedersta raden är den kortare än de andra.

Liam Spradlins hamburgermeny ser ut som en uppsättning skolbokmärken. Denna implementering är djärv och något grov. Denna ikon märks direkt, men det kan vara svårt att hitta rätt miljö för den.

Hittills har vi tittat på ikoner separat, men de fungerar bra med ord, speciellt när ordet är "Meny". Även om det kan verka som överdrivet, ser de sofistikerade ut tillsammans. De ultratunna 1px breda linjerna som används i det här fallet passar ihop som pusselbitar.

Projektet bevisar att en hamburgerikon kan se ljusare och mer attraktiv ut när den är inramad. Detta är ett utmärkt val för små enheter där en sådan ikon kommer att vara bekväm för touchnavigering.

Designern visar en enkel, elegant ikon med tre rader som genomgår olika metamorfoser för att bli ett kors eller en pil. Animation innehåller flera lösningar som kan vara användbara för alla projekt.

Resultat

Vid första anblicken kan det tyckas att en så liten sak som en menyikon inte är värd att ägna stor uppmärksamhet åt. Men om du visar lite fantasi kan du göra det till någon slags höjdpunkt i ditt gränssnitt. Särskilt om utvecklare börjar leka med dess innebörd och använder konstnärliga tekniker för att göra det mer okonventionellt och iögonfallande.

Hej alla. Corvax är med dig. Idag vill jag fortsätta ämnet mobila menyer och bjuda in dig att göra det, men bara med hjälp av jQuery. Gå.

Skapa en HTML-layout

Lägga till grundläggande CSS-stilar

Lägger till JS

Efter att vi har skapat själva menyn behöver vi koppla ihop JS-filen och komma ner till det roliga.

$(function())( $(".menuToggle").on("klick", function() ( $(".menu").slideToggle(300, function())( if($(this).css ("display") === "ingen")( $(this).removeAttr("stil"); ) ) ));

Låt oss titta närmare på vad som står här. I början lägger vi på informationen genom att klicka på själva knappen "Meny". Inuti denna händelse lägger vi till en slideToggle()-funktion i rullgardinsmenyn $(“.menu”), som smidigt öppnar och stänger rullgardinsmenyn.

Det finns ett litet problem som vi kommer att ha när vi byter version av webbplatsen och klickar på knappen "Meny", nämligen blocket med själva menyalternativen kommer att döljas eftersom Som standard lägger funktionen slideToggle() till attributet "display: none" vid stängning. För att åtgärda denna bugg måste du anropa en återuppringning (en funktion som kommer att anropas efter att huvudfunktionen har bearbetats) för slideToggle()-funktionen. Inuti återuppringningen skriver vi ett villkor. Om vi ​​har ett attribut i menyblocket lika med "display: none" tar vi bort attributet "style".

Slutsats

Så, mycket enkelt och snabbt, skapade vi en adaptiv "hamburger"-meny som du enkelt kan använda i dina projekt. du kan ladda ner källorna. Corvax var med dig. Ja, nya möten!