Hallo zusammen. Mit dir corvax. Heute möchte ich das Thema des Mobile-Menüs fortsetzen und Ihnen anbieten, nur Jquery zu verwenden. Gehen.
Erstellen eines HTML-Layouts
Fügende grundlegende CSS-Stile hinzu
NAV (Hintergrund: # 3E2597; Polsterung: 0; Rand: 0;) .Menu (List-Stil-Typ: None; Polsterung: 0; Rand: 0;) .Menu Li (Float: Links;). MENDU LI A ( Anzeige: Inline-Block; Padding: 10px 15px; Farbe: #FFF; Text-Dekoration: Keine;) .wrapper (max-width: 1024px; Polsterung: 10px; Rand: 0px auto;) .Menutoggle (Farbe: #FFF;). Polsterung: 10px 15px; Cursor: Zeiger; Anzeige: None;) Körper (Höhe: 100%;) @media (max-width: 640px) (.Menutoggle (Anzeige: Keine; Position: Absolut; Hintergrund: # 3E2597; Breite: 100%; Margin-Links: -10px; Padding-links: 10px;) .Menu Li (Float: None;))Hinzufügen von js.
Nachdem wir das Menü selbst kleben, müssen wir die JS-Datei anschließen und mit dem interessantesten fortfahren.
$ (Funktion () ($ (MENUTOGOGGLE "). EIN (" Klicken ", Funktion () ($ ($ (". Menü "). SlidetOnGegle (300, Funktion () (falls ($ (this (this) ") \u003d\u003d\u003d" Keine ") ($ (diese) .removeattr (" style ");)));););););
Schauen wir uns an, was hier geschrieben ist. Zu Beginn behindern wir sobyti.on beim Klicken auf die Schaltfläche "Menü". In der Insz dieses Ereignisses machen wir $ ("MENU") das Menü, das die SlidetOngle-Funktion bezahlt, die ein reibungsloses Öffnen und Schließen des Menüs erzeugt.
Es gibt ein kleines Problem, das auftritt, wenn Sie die Site-Versionen und die Mieten auf der Schaltfläche "Menü", nämlich den Block mit den Menüelementen selbst. Standardmäßig fügt die SlidetogGle () -Funktion beim Schließen der ATREBUT "Anzeige: keine" hinzu. Um diesen Fehler zu korrigieren, müssen Sie den SCHOKE anrufen (die Funktion, die nach der Hauptfunktion aufgerufen wird) für die Funktion SlidetOnggle (). In Nutri-Kolbinell schreiben wir einen Zustand. Wenn wir ein Attribut im Menüblock haben, lautet "Anzeige: keine", dann entfernen wir den "Stil" Etribut.
Fazit
So haben wir einfach und schnell Berichte ein adaptives Menü "Hamburger" erstellt, das Sie in Multi-Projekten lehren können. Sie können die Quelle herunterladen. Mit dir war Corvax. Ja neue Meetings!
Sie waren wahrscheinlich schon satt, Artikel zu lesen und ständig auf verschiedene Diskussionen über die drei kurzen Linien des Hamburger-Menüs zu hören. Ist es ein schlechter Empfang in der Schnittstellendesign? Oder nicht schlecht? Dieser Beitrag ist nicht so - es wird nicht urteilen, gut oder schlecht dieses Menü. Die unterste Linie ist, dass ich es für nicht die beste Designlösung, auf die eine oder andere Weise halte. Das Hamburger-Menü hat jedoch seine Stärken, insbesondere wenn sie im mobilen Design verwendet wird, unter Bedingungen des begrenzten Raums. Also was können wir tun? Nehmen Sie einfach ein Hamburger-Menü, das ist, was es trotz aller Mängel ist, und leben? Viele Websites und Anwendungen scheinen dies zu akzeptieren. Und ich denke, dass es besser ist.
Und dann gab es zwei Dinge, die mich dazu brachte, ihre Meinung zu ändern. Zuerst bin ich gestoßen. Dies ist ein Artikel, der wirklich hilft, die Auswirkungen eines Hamburger-Menüs zu verstehen. Insbesondere werden Websites mit einem solchen Menü einen ernsthaften Rückgang der Beteiligung von Benutzern tolerieren. Ein Überblick über solche Statistiken änderte gerade meine Meinung.
Der nächste Vorfall ereignete sich, als ich einen Kollegen sah, der versuchte, eine neue Webanwendung zu verwenden, in der es nur ein solches Menü war. Es war ein Entwickler, der mit der Hamburger-Menüoberfläche sehr vertraut ist, aber wenn er zur Verwendung des Antrags auf seine Bedürfnisse kam, fragte er laut laut: "Wie kann ich dorthin gelangen?". Betrachten Sie dieses kleine LeuteIch weiß, und er dachte nicht einmal daran, das Hamburger-Menüsymbol zu berühren. Wenn jemand so intelligente Probleme mit der Navigation hat, worum geht es mit einem typischen Benutzer? Meine Meinung erlangte schließlich eine solide Begründung.
Suche nach Lösungen.
Alles reicht von den Ursachen meines Unglaubens aufgrund eines Hamburger-Menüs - es ist Zeit, über die Entscheidung zu sprechen. Für einen Start studierte ich die besonderen Vorteile der Verwendung eines Hamburger-Menüs:
- Skalierbarkeit.: Dies ist wahrscheinlich der Hauptauszug und der Hauptgrund, warum viele Websites und Anwendungen es wählen. Sie können viele Navigationselemente für ein kleines Symbol stellen.
- Richtigkeit: Es geht in ein Paar zur Skalierbarkeit, aber trotzdem nicht dasselbe. Designer wollen lakonische und ordentliche Designs erstellen, um genügend Platz für den Hauptinhalt zu hinterlassen. Die Verwendung eines Hamburger-Menüs gibt ein Gefühl der visuellen Einfachheit, attraktiv für jeden Designer.
Und wenn Sie eine Alternative zu einem Hamburger-Menü erstellen, muss es irgendwie Probleme lösen, die mit ihm verbunden sind:
- Konstabilität: Es sollte möglich sein, Navigationselemente leicht zu finden, insbesondere diejenigen, die das Produkt zum ersten Mal verwenden.
- Beteiligung: Die Schnittstelle sollte Anweisungen und FidBeck ergeben, um zu erklären, dass der Benutzer mit dem Produkt erledigen kann, und wenn es angemessen ist, bestimmte Möglichkeiten zu verwenden.
Komplex: Mobile.
Ich beschloss, mit dem schwierigsten Problem zu beginnen und zu überprüfen, ob meine Lösung passt mobile Designs.. Nachdem ich an die Masse der Ideen gedacht wurde, kam ich zu dem Schluss, dass das Registerkartenmenü der IOS-Registerkarte einer von ist beste Entscheidungen Für mobile Schnittstellen. Die Masse von Leuten versuchte, das Register-Panel zu scrollen (so dass mehr als fünf Optionen) oder "mehr" der Navigation hinzugefügt werden - etwas wie ein Plüsch, der einen zusätzlichen Raum hat, der den Müll schnell füllen wird. Beide Optionen erfüllen auch immer noch nicht die Hauptanforderung - eine Klarheit, die Sichtbarkeit aller Möglichkeiten ist nicht vorhanden. Was kann also mit dem Tab-Menü erstellt werden, um es zu beheben?
Meine Entscheidung besteht darin, ein Hamburger- und Register-Panel auf einen einzigen Ansatz zu kombinieren. Das Ergebnis ist das Registerkarte Panel, das die Sollwert von Optionen für jeden Menüpunkt öffnet.
Ich habe eine Testanwendung zur Bewertung der Produktivität des Teams erstellt, um Ihren Geschäftsansatz zu veranschaulichen. Mit dieser Methode kann der Benutzer die grundlegenden Funktionen und Methoden der Verwendung des Produkts deutlich sehen. Und statt einschlafen volle Liste Die im Hamburger-Symbol verborgenen Menüpunkte, der Benutzer hinter dem Hamburger-Symbol ausgeblendet ist, wird mehrere Optionen angezeigt, die zur Registerkarte gehören, auf die er angeklickt hat. Die Navigation ist also einfacher zu verstehen und zu verdauen, alles, was Sie brauchen, immer zur Hand, ermöglicht es dem Benutzer, die Anwendungshierarchie zu sehen.
Ein weiterer Plus eines solchen Designs ist die Fähigkeit, kontextuelle Benachrichtigungen zu verwenden. Im Falle eines Hamburger-Menüs haben Sie nur einen Ort, um solche Benachrichtigungen anzuzeigen. Wenn Sie mit der Registerkarte auf dem Layout festhalten, können Sie Tipps für den Benutzer in einem der ausgewählten Menüelemente erstellen.
Der größte Sieg dieses Ansatzes ist natürlich Skalierbarkeit. Ja, Sie sind immer noch auf fünf Kategorien beschränkt, aber es ist gut. Ehrlich gesagt, ich denke, dass jeder Standort Ihre Möglichkeiten in fünf Kategorien unterbringen kann, wenn der Designer mit dem Geist die Navigation an denkt. Immerhin können in jeder dieser Kategorien fünf oder sechs Unterabschnitte liegen.
Es erscheint 30 mögliche Navigationsoptionen ohne das Sensation von Überlastung für den Benutzer und ohne den Beruf des gesamten Bildschirms.
Anwendung auf Tablets
Integration einer solchen Tabulatorplatte in Tablets, wie es ist, sah seltsam aus. Die Tabletten sind viel breiter und die Verwendung derselben Benutzeroberfläche wie für mobile GeräteEs sah auch lächerlich als Teenager in der Kleidung aus, von der er lange angebaut hatte. Also ging ich auf andere Weise. Anstatt das Laschenfeld an der Unterseite zu platzieren, platzierte ich es auf der Seite. So erhielt es in Bezug auf den Bildschirmplatz bequemer und sah sehr natürlich aus. Darüber hinaus halten viele Benutzer das Tablet an der Seite, so dass dies nur ein Zielbereich ist, um Ihre Finger zu berühren.
Was ist mit dem Desktop?
Machen Sie sich bereit ... einziehbares Menü. Alles ist wahr - versuchen Sie diesen Ansatz an der Desktop-Schnittstelle, und Sie werden auf eine unbestreitbare Realität stoßen: Diese Option ist überhaupt nicht. Das einziehbare Menü wurde seit Jahren verwendet, und fast jeder Benutzer (auch Ihre Mutter) weiß, wie es funktioniert. In diesem Fall gibt es einen Charme dieses Ansatzes - nichts Neues.
Vollständige Offenlegung
Ich weiß nicht, wie ich dieses Ding nennen soll. Raptor einleiten? Oder Taburger (Registerkarte "Tab" + Burger)? Außerdem weiß ich nicht, ob jemand früher eine ähnliche Lösung erstellt hat. Angesichts der Einfachheit eines solchen Menüs kann ich die Idee nicht zulassen, dass ich zuerst war. Ich weiß, dass mehrere Anwendungen einziehbare Menüs auf einigen Registerkarten verwenden (z. B. TweetBot), aber normalerweise werden sie als umgesetzt schneller Zugang Funktionen für fortgeschrittene Benutzer und nicht, um eine Navigationshierarchie aufzubauen. Wenn Sie ein solches Beispiel haben, lassen Sie mich in den Kommentaren wissen.
Es spielt keine Rolle, ob ein solches Menü neu oder lang erfunden ist. Es ist wichtig, ob es sich um die beste, kreative Lösung für die Navigation im Vergleich zum Hamburger-Menü handelt. Hör auf, mit dir selbst zu reden "Es gibt ein solches Menü in dieser coolen Stelle, es bedeutet, dass es das beste sein sollte" oder "Jeder tut es, das bedeutet das richtig." Das Design verdient einen besseren, aufmerksameren Ansatz.
Aktualisierung
Collin Ebergardt wurde auf Twitter bemerkt, dass dieselbe Benutzeroberfläche implementiert wurde Windows Phone. Ich selbst windows-Benutzer Telefon, und er ist richtig. Obwohl diese Art der Interaktion nur in Windows Phone für die Option "mehr" im Tabellenfeld "mehr" verwendet wird.
James Perich führte ein anderes Beispiel auf Twitter. Schauen Sie sich den AHTABBARCONTROLLER an, der von Arthur Chemmer erstellt wurde.
Einfach, funktionsfähig, intuitiv und denkwürdig, wie jedes Verkehrsschild, Hamburger-Symbol ist letztes Jahr zu einem echten Trend geworden, und ein integraler Bestandteil jeder modernen Website- und mobilen Anwendungsdesign.
Diese einfache Symbolimimation aussehen Die Menüliste ist ideal für Geräte mit kleinen Bildschirmen und Websites, in denen die visuelle Seite wichtig ist, und die Navigation sollte beiseite stehen. Dies ist eine sehr effiziente und praktikable Lösung, die den Anforderungen der modernen Welt entspricht.
Wie jedes andere Schnittstellenelement kann ein Hamburger-Symbol einige Abweichungen von der ursprünglichen Option auf der Grundlage der Anforderungen jedes einzelnen Projekts aufweisen.
Je nach Projekt und Thema kann das Hamburger-Symbol verschiedene Formen annehmen, die das Design ergänzen oder sein unabhängiges, unverwechselbares Merkmal werden können.
Die heutige Sammlung umfasst 20 verschiedene Variationen von Hamburger-Icons.
Das Hamburger-Symbol von Designer Dave-Spiele gibt sofort viel warme Energie. Der Karikaturstil fügt Verspieltheit hinzu und schafft nur die positivsten Emotionen. Sie können ein solches Symbol auf den meisten modernen illustrierten Schnittstellen verwenden.
Und Mat Walker entwickelte dieses Symbol mit Meereswellen. Es fühlt sich hervorragend in verschiedenen Projekten, die dem Meer gewidmet sind. Blau wie die primäre Farbe und Rahmen um dieses Symbol ausschließen.
Die saubere, helle und witzige Implementierung ermöglicht es diesem Design, als Menüsymbol auf kulinarischen Standorten zu arbeiten. In diesem Fall erhält die Schnittstelle ein angenehmes Kunsthighlight.
Designer bietet 10 an. interessante Versionen Hamburger-Icons, die mit einer Seele hergestellt werden. Die Serie umfasst verschiedene Arten von Burgern: einer mit Käse, der andere mit Speck, der dritte mit der Türkei, und viele andere. Wenn Sie eine Website haben oder appFast Food-Restaurant, sie werden auf jeden Fall nützlich sein. Sie sind so visuell interessant, dass sie in fast jedem Thema einen Ort finden können.
Und dieses Projekt repräsentiert einen realistischen Hamburger im Vektor. Der Schließknopf wird in Form einer gebratenen Kartoffel gemacht, die das Formular "X" mit oder ohne Sauce nimmt. Dies ist eine kreative Lösung, die exotisch in der Seitendesign hinzufügen kann.
Offiziellen Website Krieg der Sterne Enthält ein interessantes Humburger-Symbol, das sich dreht. Jede Linie ist in zwei Teile unterteilt, um einen Vektor der Reflexion von Lichtlaserschwertern zu erhalten. Die Lösung stärkt den Gesamteindruck der Site und stärkt die Marke.
Burger-Menü von Peter Tauri ist eine hervorragend illustrierte Version des Symbols. Hauptmerkmal Dieses Symbol soll Farben auswählen, die das Schnittbrötchen und das Fleischkitlet imitieren.
Die Serie verfügt über verschiedene Versionen von Hamburgern, die mit einem Linienstil implementiert sind. Hier finden Sie einen Doppelhamburger, einen Hamburger mit Käse und Salat, ein Outdoor-Sandwich und andere. Finden perfekte Lösung Für Ihre ordentliche, flache Schnittstelle ist leicht, Piquanz und "Geschmack" zuzusetzen.
Der Künstler zeigt drei lustige Versionen der Schaltfläche: klassischer Hamburger, Cheeseburger und Hot Dog. Die Basis von jedem liegt ein oder zwei Farben, was es für verschiedene winzige Schnittstellen eignet. Hier erzeugt die Farbe das richtige Erscheinungsbild des Sandwichs.
Der Künstler bietet eine kleine Animation, die nur ein Menüsymbol enthält, und mehrere reibungslose Übergänge, die die Konvertierung in den üblichen "X" (Schließknopf) begleiten. Es gibt spezielle Effekte, die beim Schweben der Maus oder beim Drücken auftreten.
Im Gegensatz zu den meisten Beispielen zeigt dieses Beispiel geschickte Manipulationen mit Gewicht, nicht farblich. Die oberen und unteren Zeilen des mutigeren als der Durchschnitt als der Durchschnitt und erstellen Sie die richtige Ansicht des "Hamburger". Der Künstler wurde erfolgreich mit der Aufgabe bewältigt.
Menü Animation der Ninja-Symbol von Andrew Kowardakova unterscheidet sich von den meisten Buttons-Hamburger und bietet eine interessante und herausragende Lösung mit einem geheimnisvollen und attraktiven Untertext. Hier ist jede Zeile ein Ninja im Vektor.
Und dieses Symbol ist eine Illustration eines Burgers mit Salat und Käse. Dies kann einem Highlight einer beliebigen langweiligen Schnittstelle hinzufügen. Ausgezeichnete Lösung für den Standort des Restaurants oder des Cafés.
Dies ist ein Artikel, in dem Sie interessante Argumente über das modische Menü-Symbol finden können. Es ist mit einem Bild gekennzeichnet, das die drei Optionen der Hamburger-Taste anzeigt. Die erste ist eine erstklassige flache Illustration, die zweite ist die lackierte Ikone von drei Zeilen, und der dritte ist die monochromatische Version der zweiten Probe ist die beliebteste Wahl zwischen den Designer.
GIF zeigt glatte Übergänge zwischen dem anfänglichen Zustand dieses minimalistischen und eleganten Symbols und seinem Endzustand. Da die Animation von der unteren Zeile beginnt, ist es kürzer als andere.
Das Hamburger-Menü von Liam Spratlin sieht aus wie eine Reihe von Schulkosezeichen für Bücher. Diese Implementierung ist mutig und etwas rau. Dieses Symbol ist sofort spürbar, es kann jedoch schwierig sein, eine geeignete Umgebung dafür zu finden.
Bisher haben wir Icons separat betrachtet, aber sie arbeiten gut mit Wörtern, insbesondere wenn dieses Wort "Menü" ist. Obwohl es unnötig erscheinen mag, sehen sie zusammen exquisit aus. Ultradünne Linien von 1 px breit, die in diesem Fall verwendet werden, werden als Teil des Puzzles kombiniert.
Das Projekt beweist, dass das Hamburger-Symbol heller und attraktiv aussehen kann, wenn er inhaftiert ist. Dies ist eine großartige Wahl für kleine Gerätewo ein solches Symbol für die sensorische Navigation bequem ist.
Der Designer zeigt ein einfaches, glattes Symbol mit drei Zeilen an, das verschiedenen Metamorphosen ausgesetzt ist, in einem Kreuz oder einem Pfeil umdrehen. Die Animation umfasst mehrere Lösungen, die für jedes Projekte nützlich sein können.
ERGEBNISSE
Auf den ersten Blick mag es anscheinend, dass solche Kleinigkeiten wie das Menüsymbol nicht viel Aufmerksamkeit zahlen sollten. Wenn Sie jedoch eine kleine Fantasie zeigen, können Sie es in eine Art Highlight Ihrer Benutzeroberfläche verwandeln. Insbesondere wenn die Entwickler mit seiner Bedeutung spielen und künstlerische Techniken verwenden, um es unkonventioneller zu machen und Aufmerksamkeit auf sich zu ziehen.
