Vacker menyburger på CSS. Snabb skapelse "Hamburger" -meny på jquery
Från Vitaly Rubtsova och kunde inte motstå att implementera det.
I den här lektionen kommer jag att berätta hur man gör detta med en CSS, utan användning av JavaScript. Så vi kommer att se några CSS (och SCSS) tricks, vilket gör att vi kan uppnå nästan samma smidiga animering som den här animerade GIF.
Här är ett exempel på vad vi ska göra:
Märkning
Låt oss börja med strukturen i HTML, som vi kommer att använda. Se kommentarer för bättre förståelse.
Initial Styles SCSS
Lägg nu några grundläggande stilar för att få det önskade utseende. Koden är ganska enkel.
Innan du börjar skapa resten av gränssnittet, lägg till omkopplingsoperationen för att enkelt flytta från ett tillstånd till en annan.
HTML vi behöver är redan på plats. Och den stil som gör att den fungerar är ungefär så:
// Dölj Chekbox #TOGGLE (Display: None;) // Styles för "Öppna" Status När Chekbox är vald #TOggle: Kontrollerad (// vilket objekt som helst som du behöver ändra när menyn öppnas, går här med väljaren ~ // stilar för att öppna navigeringsmenyn, till exempel & ~ .nav ())
Skapa ett stängt tillstånd
För att göra ett stängt tillstånd måste vi konvertera menyalternativ i linjen för att få hamburgerikonen. Det finns flera sätt att få en sådan omvandling. Vi bestämde oss för att göra detta enligt följande:
Och här är koden som den inser.
$ övergångsvaraktighet: 0,5s; // visning av navigationsobjekt i form av linjer som utgör hamburgerikonen .Nav-objekt (position: släkting; display: inline-block; float: vänster; klar: båda; färg: transparent; typsnitt: 14px; Letter-spraction: - 6.2px; Höjd: 7px; Linjehöjd: 7px; Text-transform: versal; Vitutrymme: Nowrap; Transform: Scaley (0,2); Övergång: $ Övergångsvaraktighet, Opacity 1s; // Lägga till Bredd för första raden &: nth-barn (1) (brevutrymme: -8px;) // Lägga till en bredd för den andra raden &: nth-barn (2) (Letter-spraction: -7px;) // Inställningar för objekt som börjar från fjärde och: nth-barnet (n + 4) (Letter-spraction: -8px; marginal-topp: -7px; opacitet: 0;) // få linjer för hamburgare &: före: absolut innehåll : ""; Topp: 50%; vänster: 0; Bredd: 100%; Höjd: 2px; Bakgrundsfärg: # EC7263; Transform: Översätt (-50%) Scaley (5); Övergång: $ Övergångsvaraktighet;) )
Observera att här har vi bara placerat de viktigaste stilerna för navigationsobjekt som är viktigast. Du kan hitta en fullständig kod på GitHub.
Skapa en öppen meny
Att skapa Öppna menynVi måste återställa navigationsobjekt från linjerna till vanliga textlänkar, samt göra ett antal mindre ändringar. Låt oss se hur man gör det:
Om vi \u200b\u200btittar närmare på GIF ser vi att alla menyalternativ flyttar samtidigt, men i en kontrollersorder. Vi kan göra det i CSS! I princip måste vi välja varje element (med: nth-barn) och sätta en gradvis ökning av värdet av övergångsfördröjning. Detta är definitivt ett återkommande jobb. Och vad händer om vi har fler saker? Oroa dig inte, vi kan göra allt bättre, med lite SCSS Magic:
$ Artiklar: 4; $ Övergångsfördröjning: 0,05s; .NAV-objekt (// Ställ in fördröjningen för navigationsobjekt när du stänger @For $ i från 1 till $ objekt (&: nth-barn (# ($ i)) ($ försenad: ($ i - 1) * $ övergång Fördröjning; Övergångsfördröjning: $ Fördröjning; &: Före: $ Fördröjning;))))
Observera att med hjälp av den här koden får vi det önskade steg-för-steg-beteendet för att stänga animering. Vi måste beräkna $ -fördröjning, lite annorlunda än öppningsanimationen för att få en backstegsövergång. Så här:
$ Fördröjning: ($ objekt - $ i) * $ övergångsfördröjning;
Produktion
Så vi slutade med vår bisarra meny! Vi inkluderade också några fiktiva element som i en animerad gif, och du kan se.
Så vi har bara skapat en enkel och funktionell meny på CSS. Om du inte vill använda CSS-växlingssystemet kan det dock vara helt ersatt med flera JavaScript-linjer utan mycket ansträngning.
Vi hoppas att den här lektionen var som du och du tyckte det var användbart!
Vi har bara gjort en layout.
5. Ladda ner jquery-3.3.1.min.js-biblioteket
Anslut till vår Html. Dokument före stängningskoden kropp. Två filer, en av dem är fortfarande tom.
Vi kommer inte att demontera i detalj Js. Kod, gräns för endast delade kommentarer. Jag kan ge råd, för dem som är intresserade av att programmera Js.
Den här linjen $ ("Menuburger"). På ("klicka", funktion () () ( Spårar en händelse på klicket på elementet med klassen Mmenuburger.
$ (". Meny"). Slidetoggle (200, funktion () () Här appliceras funktionen på menyn slidetoggle ()som växlar växlar eller viks, valda objekt på 200 MiliseCond-sidan.
$ (detta) .Removeattr ("stil"); - tar bort ut i kö stilar visa: Ingen;
Klicka nu hamburgermeny Utvecklingen och veckorna, men det är ett problem, när du vrider på menyn skiftar ner huvudinnehållet på webbplatsen och korrekt, om det är ovanpå innehållet. Samtidigt lider hastigheten på sidbelastningen, särskilt på mobilt Internet.
6. Använda menyn ovanpå innehållet
Detta problem löses genom att placera menyn.
Till största del CSS. Lägg till kod
Meny ( Position: släkting;
}
I en mediaförfrågan: .MENU ( Bakgrund: #eee; Position: absolut;
}
Därefter, hamburgermeny kommer att utvecklas över huvudinnehållet. Så det borde vara.
Hamburgermeny på CSS
1. Koppla bort och ta bort alla skript
2. Sätt i B. Html. Fil mellan taggar div och klyfta Låskod
3. Byt ut tag div C-klass Mmenuburger på märka
4. Slips iD-ingång. Med attribut för etikett genom #Menucss.
Som ett resultat, när du klickar på ikonen hamburgermenyEtt kryssrutan visas i Chekbox.
5. Lägg till en pseudoklass i medieförfrågan kontrollerade.
#Menucss: checkade ( Visa: Ingen;
}
Det betyder att när du klickar på ikonen sätts markeringen i kryssrutan, men på skärmen är den dold, bara ikonen är synlig. Tanken är att om kryssrutan inte är markerad är menyn stängd, och om den är markerad med ett kryssmarkering används menyn. Händelse med öppning och stängning av menyn, suspenderad i vilket tillstånd är en kryssruta.
6. Square inmatning i CSS.
#Menucss ( Visa: Ingen;
}
7. Ändra koden i punkt 5, se ovan i artikeln om nästa
#Menucss: Checked + .Menu ( Visa: Block;
}
Om länken mellan märka och input #menucss. Noteras av kryssrutan (Kontrollerade)Menyn är utplacerad. Det är allt magi hamburgermeny Fungerar på rena CSS. Och om du lägger till det en jämn animering, då ingen skillnad med menyn på Js.Du kommer inte att känna.
Försök att minska webbläsaren och du kommer tydligt se hur det fungerar. hamburgermeny på CSS
Produktion
Båda operativa alternativen. Meny på Js., låt oss säga att det är rätt, när det gäller att använda koden. Meny på CSS. - Det här är "krycka", en slags "manifestation av uppfinningsrikedom", väl lämpad för dem som inte vill förstå Js. Och det kommer bara att tillämpa det på sina projekt. För webbplatser att beställa några "kryckor", rekommenderar jag starkt att göra en layout, skärpad för vidare användning Js., andra specialister.
Du har nog redan varit trött på att läsa artiklar och ständigt lyssna på olika diskussioner om de tre korta linjerna i Hamburger-menyn. Är det en dålig mottagning i gränssnittsdesign? Eller inte dåligt? Det här inlägget är inte så - det kommer inte att döma, bra eller dåligt den här menyn. Bottom line är att jag anser att det inte är den bästa designlösningen, på ett eller annat sätt. Men menyn hamburgare har sin egen styrkorSpeciellt när den används i mobil design, i förhållanden med begränsat utrymme. Så vad kan vi göra? Ta bara en hamburgare-meny som är vad den är, trots alla brister och bor på? Många platser och applikationer verkar acceptera detta. Och jag tror att det är kapabelt att bättre.
Och då var det två saker som fick mig att ändra sig. Först kom jag över. Det här är en artikel som verkligen hjälper till att förstå effekterna av att använda en hamburgare-meny. I synnerhet tolererar webbplatser med en sådan meny en allvarlig minskning av användarnas engagemang. En översikt över en sådan statistik började bara ändra min åsikt.
Nästa händelse hände när jag såg en kollega som försökte använda en ny webbapplikation där det bara var en sådan meny. Det var en utvecklare som är mycket bekant med menyn med hamburgare, men när det gällde användningen av ansökan om hans behov, frågade han högt högt: "Hur kan jag komma dit?". Tänk på, det här är ett av de mest kända personerna jag vet, och han tänkte inte ens på att röra på hamburgermenyikonen. Om någon har så smarta problem med navigering, vad pratar det här om en typisk användare? Min åsikt förvärvade äntligen en solid motivering.
Sök efter lösningar
Allt är tillräckligt om orsakerna till min vantro på grund av en hamburgare-meny - det är dags att prata om beslutet. För en början studerade jag de speciella fördelarna med att använda en hamburgare-meny:
Skalbarhet: Detta är förmodligen huvud plus och den främsta anledningen till att så många platser och applikationer väljer det. Du kan lägga mycket navigationsobjekt för en liten ikon.
Noggrannhet: Det går i ett par till skalbarhet, men fortfarande, inte samma sak. Designers vill skapa lakiska och snygga mönster, vilket ger tillräckligt med utrymme för huvudinnehållet. Användningen av en hamburgare-meny ger en känsla av visuell enkelhet, attraktiv för någon designer.
Och om du skapar ett alternativ till en hamburgare-meny, måste det på något sätt lösa problem relaterade till honom:
Konstabilitet: Det bör vara möjligt att enkelt hitta navigationselement, särskilt de som använder produkten för första gången.
Medverkan: Gränssnittet ska ge uppmaningar och fidbeck, vilket förklarar att användaren kan göra med produkten, och när det är lämpligt att använda vissa möjligheter.
Komplex: mobil
Jag bestämde mig för att börja med det svåraste problemet och kontrollera om mitt beslut var lämpligt för mobila mönster. Efter att ha tänkt en massa av idéer kom jag till slutsatsen att menyn på iOS-fliken är en av de bästa lösningarna för mobila gränssnitt. Massan av människor försökte göra flikpanelen rullning (så att mer än fem alternativ) eller lägg till "mer" till navigering - något som en plysch, som har ett extra rum som snabbt fyller papperskorgen. Dessutom uppfyller båda dessa alternativ fortfarande inte huvudkravet - ett tydlighet, synligheten av alla möjligheter är frånvarande. Så vad kan skapas med flikmenyn för att fixa den?
Mitt beslut är att kombinera en hamburgare och flikpanel till ett enda tillvägagångssätt. Resultatet är flikpanelen, som öppnar uppsättningen alternativ för varje menyalternativ.
Jag skapade en testansökan för att bedöma lagets produktivitet för att illustrera ditt tillvägagångssätt i affärer. Med den här metoden kan användaren tydligt se de grundläggande funktionerna och metoderna för att använda produkten. Och istället för att somna full lista Menyalternativen som är dolda bakom hamburgerikonen, användaren visas flera alternativ som hör till fliken som han klickade på. Så navigering är lättare att förstå och smälta, allt du behöver är alltid till hands, tillåter användaren att se applikationshierarkin.
Ett annat plus av en sådan design är möjligheten att använda kontextuella meddelanden. När det gäller en hamburgare-meny har du bara ett ställe att visa sådana meddelanden. Om du håller fast vid layouten med flikpanelen kan du producera tips för användaren i någon av de valda menyalternativen.
Naturligtvis är den största segern i detta tillvägagångssätt skalbarhet. Ja, du är fortfarande begränsad till fem kategorier, men det är bra. Ärligt talat tror jag att någon webbplats kan ta emot dina alternativ i fem kategorier om designern med sinnet tänker på navigering. När allt kommer omkring, i var och en av dessa kategorier, kan det finnas fem eller sex stycken. Det visar sig 30 möjliga navigationsalternativ utan känsla av överbelastning för användaren och utan ockupation av hela skärmutrymmet.
Ansökan på tabletter
Integration av en sådan panel av flikar i tabletter, som det är, såg konstigt ut. Tabletterna är mycket bredare och användningen av samma UI som för mobil enheterDet såg också löjligt ut som en tonåring i kläderna, från vilka han länge vuxit. Så gick jag till ett annat sätt. I stället för att placera flikpanelen längst ner placerade jag den på sidan. Så det visade sig vara bekvämare när det gäller att använda skärmutrymmet och såg väldigt naturligt ut. Dessutom håller många användare tabletten vid sidan, så det här är bara ett målområde för att röra dina fingrar.
Vad sägs om skrivbordet?
Gör dig redo ... Retractible meny. Allt är sant - prova detta tillvägagångssätt för skrivbordsgränssnittet och du kommer att stöta på en obestridlig verklighet: det här alternativet är inte alls. Den utdragbara menyn användes i flera år, och nästan vilken användare som helst (även din mamma) vet hur det fungerar. I detta finns det en charm av detta tillvägagångssätt - inget nytt.
Full information
Jag vet inte hur man ringer den här. Deponera raptor? Eller Taburger (Tab "Tab" + Burger)? Dessutom vet jag inte om någon skapade en liknande lösning tidigare. Med tanke på enkelheten hos en sådan meny kan jag inte tillåta tanken att jag först var. Jag vet att flera applikationer använder utdragbara menyer på vissa flikar (till exempel tweetbot), men brukar de implementeras som snabb åtkomst Funktioner för avancerade användare, och inte för att bygga 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ång uppfunnad. Det är viktigt om det är den bästa, mer kreativa lösningen för att navigera jämfört med hamburgermenyn. Sluta prata med dig själv "Det finns en sådan meny på den här coola platsen, det betyder att det borde vara det bästa" eller "alla gör det, det betyder att det är korrekt." Designen förtjänar ett bättre och mer uppmärksamt tillvägagångssätt. Uppdateringar Collin Ebergardt noterade på Twitter att samma UI genomfördes i Windows-telefon. Jag är mig själv windows-användare Telefon, och han har rätt. Även om denna typ av interaktion används i Windows Phone endast för alternativet "Mer" i flikpanelen.
James Perich ledde ett annat exempel på Twitter. Titta på Ahtabbarcontroller skapad av Arthur Chemmer.
Enkelt, funktionellt, intuitivt och minnesvärt, som alla vägskyltar, har hamburgerikonen blivit en riktig trend förra året och ett integrerat element i någon modern webbplats och mobil applikationsdesign.
Den här enkla ikonen simulerar utseendet på menylistan, är idealisk för enheter med små skärmar och webbplatser, där den visuella sidan är viktig, och navigeringen ska stå åt sidan. Detta är en mycket effektiv och livskraftig lösning som uppfyller kraven i den moderna världen.
Liksom alla andra gränssnittselement kan en hamburgerikon har vissa avvikelser från det ursprungliga alternativet baserat på behoven hos varje enskilt projekt.
Beroende på projektet och temat kan hamburgerikonen ta olika former som kompletterar designen eller kan bli dess oberoende, särskiljande funktion.
Hamburgerikonen från Designer Dave-spel ger omedelbart mycket varm energi. Tecknad stil lägger till lekfullhet och skapar bara de mest positiva känslorna. Du kan använda en sådan ikon i de flesta moderna illustrerade gränssnitt.
Och Mat Walker utvecklade den här ikonen med havsvågor. Det kommer att känna sig utmärkt på olika projekt dedikerade till havet. Blå som den primära färgen och ramen runt gör den här ikonen exklusiv.
Ren, ljus och vittig implementering gör det möjligt för denna design att arbeta som en menyikon på kulinariska platser. I det här fallet kommer gränssnittet att få en trevlig konsthöjd.
Designern erbjuder 10 intressanta versioner av hamburgare ikoner, som är gjorda med en själ. Serien täcker olika typer av hamburgare: en med ost, den andra med bacon, den tredje med kalkon och många andra. Om du har en webbplats eller mobil appSnabbmatrestaurang, de kommer definitivt att vara användbara. De är så visuellt intressanta att de kan hitta en plats i nästan alla ämnen.
Och det här projektet representerar en realistisk hamburgare i vektorn. Stängningsknappen är gjord i form av en stekt potatis som tar formen "X", med eller utan sås. Detta är en kreativ lösning som kan lägga till exotisk i siddesign.
Officiell plats Stjärnornas krig. Innehåller en intressant humburgerikon, som vänder. Varje linje är uppdelad i två delar för att få en vektor av reflektion av lätta laservärden. Lösning förbättras helhetsintryck Från webbplatsen och stärker varumärket.
Burgermeny från Peter Tauri är en perfekt illustrerad version av ikonen. Huvudfunktion Den här ikonen är att välja färger som imiterar den snittiga bun och köttkitlet.
Serien har olika versioner av hamburgare som implementeras med hjälp av linjestil. Här hittar du en dubbel hamburgare, en hamburgare med ost och sallad, en utomhus smörgås och några andra. Hitta den perfekta lösningen för ditt snygga, platta gränssnitt kommer helt enkelt att lägga till piquancy och "smak".
Konstnären visar tre roliga versioner av knappen: Klassisk hamburgare, cheeseburger och varmkorv. Grunden för varje ligger en eller två färger, vilket gör det lämpligt för olika små gränssnitt. Här skapar färgen smörgåsens korrekta utseende.
Konstnären erbjuder en liten animering som bara innehåller en menyikon och flera smidiga övergångar som följer med omvandlingen till den vanliga "X" (stängningsknappen). Det finns speciella effekter som uppstår vid svävande mus eller pressning.
Till skillnad från de flesta exempel ovan visar detta prov skickliga manipuleringar med vikt, inte färg. De övre och nedre linjerna i den djupare än genomsnittet och skapar den rätta vyn på "hamburgaren". Konstnären lyckades lyckas med uppgiften.
Menyanimering av ninja-ikonen från Andrew Kowardakova skiljer sig från de flesta av knapparna-hamburgarna, och erbjuder en intressant och enastående lösning, med en mystisk och attraktiv subtext. Här är varje linje en ninja i vektor.
Och den här ikonen är en illustration av en burgare med sallad och ost. Detta kan lägga till en höjdpunkt till något tråkigt gränssnitt. Utmärkt lösning för restaurangen eller kaféet.
Det här är en artikel där du kan hitta intressanta argument om den fashionabla menyikonen. Den är markerad med en bild som visar de tre alternativen på hamburgaren. Den första är en förstklassig platt illustration, den andra är den målade ikonen på tre linjer, och den tredje är den monokromatiska versionen av det andra provet är det mest populära valet bland designers.
Gif visar smidiga övergångar mellan initialtillstånd Denna minimalistiska och eleganta ikon, och dess slutliga tillstånd. Eftersom animationen börjar från bottenlinjen är den kortare än andra.
Hamburgermeny från Liam Spratlin ser ut som en uppsättning skolbokmärken för böcker. Denna implementering är djärv och något grovt. Den här ikonen är omedelbart märkbar, men det kan vara svårt att hitta en lämplig miljö för den.
Hittills har vi betraktat ikoner separat, men de fungerar bra med ord, speciellt när det här ordet "meny". Även om det kan tyckas vara onödigt, ser de tillsammans utsökt. Ultra-tunna linjer av 1px bred, som används i detta fall, kombineras som en del av pusslet.
Projektet visar att hamburgarsymbolen kan se ljusare och attraktiv när den är fängslad. Detta är ett utmärkt val för småaredär en sådan ikon kommer att vara lämplig för sensorisk navigering.
Designern visar en enkel, slät ikon på tre linjer, som utsätts för olika metamorfoser, som vänder sig till ett kors eller pil. Animering innehåller flera lösningar som kan vara användbara för alla projekt.
RESULTAT
Vid första anblicken kan det tyckas att sådana bagage som menyikonen inte borde betala mycket uppmärksamhet. Men om du visar lite fantasi kan du göra det till en slags höjdpunkt i ditt gränssnitt. Speciellt om utvecklarna börjar spela med sin mening och använda konstnärliga tekniker för att göra det mer okonventionellt och lockande uppmärksamhet.
Nedladdning kommer nu att börja ... Glöm inte att dela materialet. i sociala nätverk med din Kolleger
ingång
Full information
