Dzień dobry. Corvax z tobą. Dzisiaj chcę kontynuować temat mobilnych menu i zasugerować, abyś to zrobił, ale tylko przy użyciu jQuery. Udać się.
Tworzenie układu HTML
Dodanie podstawowych stylów CSS
nav (background: # 3e2597; padding: 0; margin: 0;) .menu (list-style-type: none; padding: 0; margin: 0;) .menu li (float: left;) .menu li a ( display: inline-block; padding: 10px 15px; color: #fff; text-decoration: none;). wrapper (max-width: 1024px; padding: 10px; margin: 0px auto;) .menuToggle (color: #fff; dopełnienie: 10px 15px; kursor: wskaźnik; wyświetlacz: brak;) body (wysokość: 100%;) @media (max-width: 640px) (.menuToggle (display: block;) .menu (display: none; position: bezwzględna ; background: # 3e2597; width: 100%; margin-left: -10px; padding-left: 10px;) .menu li (float: none;))Dodanie JS
Po ułożeniu samego menu musimy podłączyć plik JS i rozpocząć zabawną część.
$ (function () ($ (". menuToggle"). on ("click", function () ($ (". menu"). slideToggle (300, function () (if ($ (this) .css (" display ") \u003d\u003d\u003d" none ") ($ (this) .removeAttr (" style ");)));));));
Przyjrzyjmy się bliżej temu, co jest tutaj napisane. Na początku odkładamy zaczepione, klikając na przycisk „Menu”. Wewnątrz tego zdarzenia dodajemy funkcję slideToggle () do menu rozwijanego $ (". Menu"), które płynnie otwiera i zamyka menu rozwijane.
Jest mały problem, który będziemy mieć przy zmianie wersji serwisu i kliknięciu przycisku „Menu”, a mianowicie blok z samymi pozycjami menu zostanie ukryty. domyślnie funkcja slideToggle () dodaje atrybut „display: none” po zamknięciu. Aby naprawić ten błąd, musisz wywołać callback (funkcję, która zostanie wywołana po przetworzeniu funkcji głównej) dla funkcji slideToggle (). Wewnątrz wywołania zwrotnego wpisujemy warunek. Jeśli w bloku menu mamy atrybut równy „display: none”, to usuwamy atrybut „style”.
Wniosek
Tak szybko i prosto stworzyliśmy responsywne menu hamburgerowe, które z łatwością możesz wykorzystać w moich projektach. możesz pobrać źródła. Corvax był z tobą. Tak, nowe spotkania!
Prawdopodobnie jesteś już zmęczony czytaniem artykułów i ciągłym słuchaniem różnych dyskusji na temat trzech krótkich wersów menu z hamburgerami. Czy to zła sztuczka w projektowaniu interfejsu? Czy nie jest zły? Ten post nie jest taki - nie oceni, czy to menu jest dobre, czy złe. Najważniejsze jest to, że myślę, że i tak nie jest to najlepsze rozwiązanie projektowe. Ale menu hamburgerów ma również swoje mocne strony, zwłaszcza gdy jest używane w mobilnej konstrukcji, gdzie przestrzeń jest ograniczona. Więc co możemy zrobić? Po prostu zaakceptuj menu z hamburgerami takie, jakie jest, pomimo wszystkich wad, i przejdź dalej? Wygląda na to, że wiele witryn i aplikacji pogodziło się z tym. I myślę, że dam radę najlepiej.
I wtedy wydarzyły się dwie rzeczy, które sprawiły, że zmieniłem zdanie. Najpierw się natknąłem. Ten artykuł naprawdę pomaga zrozumieć konsekwencje używania menu hamburgerowego. W szczególności witryny z takim menu odczuwają poważny spadek zaangażowania użytkowników. Przegląd takich statystyk właśnie zaczął zmieniać moją opinię.
Kolejny incydent miał miejsce, kiedy obserwowałem kolegę próbującego skorzystać z nowej aplikacji internetowej, która miała właśnie takie menu. Był to programista, który bardzo dobrze znał interfejs menu hamburgera, ale kiedy przyszło do korzystania z aplikacji do własnych potrzeb, zapytał głośno: „Jak się tam dostać?” Należy pamiętać, że jest to jeden z najmądrzejsi ludzieże wiem, a on nawet nie pomyślał o dotknięciu ikony menu hamburgera. Jeśli ktoś tak mądry ma problemy z nawigacją, co to mówi o typowym użytkowniku? Moja opinia w końcu zyskała solidne podstawy.
Znalezienie rozwiązania
Dość o powodach mojego niedowierzania w potęgę hamburgerowego menu - pora porozmawiać o rozwiązaniu. Na początek zbadałem konkretne zalety korzystania z menu hamburgerowego:
- Skalowalność: To jest prawdopodobnie główny plus i główny powód, dla którego tak wiele witryn i aplikacji je wybiera. Za małą ikoną można umieścić wiele elementów nawigacyjnych.
- Precyzja: To idzie w parze ze skalowalnością, ale nie to samo. Projektanci chcą tworzyć czyste, zgrabne projekty, pozostawiając wystarczająco dużo miejsca na główną zawartość. Korzystanie z menu hamburgera zapewnia wizualną prostotę, która przemawia do każdego projektanta.
A jeśli mamy stworzyć alternatywę dla hamburgerowego menu, to musi jakoś rozwiązać problemy z tym związane:
- Zrozumiałość: Powinno być możliwe łatwe znalezienie elementów nawigacyjnych, szczególnie dla tych, którzy używają produktu po raz pierwszy.
- Uwikłanie: interfejs powinien zapewniać wskazówki i informacje zwrotne wyjaśniające, co użytkownik może zrobić z produktem i kiedy należy używać określonych funkcji.
Trudna część: mobilna
Postanowiłem zacząć od najtrudniejszego problemu i sprawdzić, czy moje rozwiązanie działa projekty mobilne... Po rozważeniu mnóstwa pomysłów doszedłem do wniosku, że menu paska zakładek iOS jest jednym z menu lepsze rozwiązania dla interfejsów mobilnych. Wiele osób próbowało sprawić, by pasek zakładek był przewijalny (aby pomieścić więcej niż pięć opcji) lub dodać „więcej” do nawigacji - coś w rodzaju Pluszkina, który ma dodatkowy pokój, który szybko zapełni się śmieciami. Ponadto obie te opcje nadal nie spełniają głównego wymagania - brakuje jasności, widoczności wszystkich funkcji. Co więc możesz zrobić za pomocą menu kart, aby to naprawić?
Moim rozwiązaniem jest połączenie hamburgera i batonika w jednym podejściu. Rezultatem jest pasek kart, który otwiera zestaw opcji dla każdej pozycji menu.
Stworzyłem aplikację do testowania wydajności zespołu, aby zilustrować moje podejście w działaniu. Korzystając z tej metody, użytkownik wyraźnie widzi główne funkcje i sposoby korzystania z produktu. Zamiast zasypiania z pełną listą pozycji menu ukrytych za ikoną hamburgera, użytkownik widzi kilka opcji związanych z zakładką, na którą kliknął. Dzięki temu nawigacja jest łatwiejsza do zrozumienia i przetrawienia, wszystko, czego potrzebujesz, jest zawsze pod ręką, pozwala użytkownikowi zobaczyć hierarchię aplikacji.
Kolejnym plusem tego projektu jest możliwość korzystania z powiadomień kontekstowych. W przypadku menu z hamburgerami masz tylko jedno miejsce, w którym możesz wyświetlać te powiadomienia. Jeśli pozostaniesz przy układzie paska kart, możesz wydawać użytkownikowi monity w dowolnym z wybranych elementów menu.
Oczywiście największą wygraną przy takim podejściu jest skalowalność. Tak, nadal jesteś ograniczony do pięciu kategorii, ale to dobrze. Szczerze mówiąc, myślę, że każda witryna może dopasować swoje opcje do pięciu kategorii, jeśli projektant mądrze przemyśli nawigację. Rzeczywiście, w każdej z tych kategorii może być pięć lub sześć dodatkowych podpozycji.
W sumie dostępnych jest 30 możliwych opcji nawigacji bez uczucia przytłoczenia dla użytkownika i bez zajmowania całej powierzchni ekranu.
Aplikacja na tablety
Zintegrowanie takiego paska kart z tabletami, ponieważ wygląda to dziwnie. Tablety są znacznie szersze i używają tego samego interfejsu użytkownika, co w przypadku urządzenia mobilnewyglądał śmiesznie jak nastolatek w ubraniu, z którego dawno wyrósł. Więc poszedłem w drugą stronę. Zamiast umieszczać pasek zakładek na dole, umieściłem go z boku. Okazało się to wygodniejsze pod względem wykorzystania powierzchni ekranu i wyglądało bardzo naturalnie. Ponadto wielu użytkowników trzyma tablet przy boku, więc jest to obszar docelowy dotykania palcami.
A co z pulpitem?
Przygotuj się ... wysuwane menu. Zgadza się - wypróbuj to podejście do interfejsu pulpitu, a staniesz przed niezaprzeczalną rzeczywistością: ta opcja wcale nie jest nowa. Wysuwane menu istnieje od lat i prawie każdy (nawet Twoja mama) wie, jak to działa. Na tym polega piękno tego podejścia - nic nowego.
Pełne ujawnienie informacji
Nie wiem, jak to nazwać. Szuflada z zakładkami? Albo TABurger (TAB „tab” + burger)? Co więcej, nie wiem, czy ktoś wcześniej stworzył podobne rozwiązanie. Biorąc pod uwagę prostotę takiego menu, nie mogę przyznać, że byłem pierwszy. Wiem, że kilka aplikacji używa wysuwanych menu na niektórych przyciskach zakładek (takich jak Tweetbot), ale zazwyczaj są one zaimplementowane jako szybki dostęp do funkcji dla zaawansowanych użytkowników, a nie w celu zwiększania hierarchii nawigacji. Jeśli masz taki przykład to daj znać w komentarzach.
Nie ma znaczenia, czy takie menu jest nowe, czy od dawna zostało wymyślone. Liczy się to, czy jest to lepsze, bardziej kreatywne rozwiązanie nawigacyjne w porównaniu z menu hamburgerowym. Przestań wmawiać sobie: „Ta fajna strona ma takie menu, więc musi być najlepsze” lub „Wszyscy to robią, więc jest dobrze”. Projekt zasługuje na lepsze, bardziej przemyślane podejście.
AKTUALIZACJE
Colleen Eberhardt zauważyła na Twitterze, że ten sam interfejs użytkownika jest zaimplementowany w telefon Windows... ja sam użytkownik systemu Windows Telefon i on ma rację. Chociaż ten typ interakcji jest używany w Windows Phone tylko dla opcji „więcej” na pasku kart.
James Perich podał inny przykład na Twitterze. Przyjrzyj się AHTabBarController stworzonemu przez Arthura Hemmera.
Prosta, funkcjonalna, intuicyjna i zapadająca w pamięć, jak każdy znak drogowy, ikona hamburgera stała się w zeszłym roku prawdziwym trendem i integralną częścią każdej nowoczesnej strony internetowej i projektu aplikacji mobilnej.
Ta prosta ikona naśladuje wygląd menu listy, idealne dla urządzeń z małymi ekranami i stron internetowych, w których ważna jest grafika, a nawigacja powinna być na przeszkodzie. Jest to wysoce skuteczne i wykonalne rozwiązanie, które spełnia wymagania dzisiejszego świata.
Jak każdy inny element interfejsu, ikona hamburgera może mieć pewne odchylenia od oryginalnej wersji, w zależności od potrzeb każdego projektu.
W zależności od projektu i tematu ikona hamburgera może przybierać różne formy, które uzupełniają projekt lub stają się jego własną, charakterystyczną cechą.
Dzisiejsza kolekcja obejmuje 20 różnych odmian ikony hamburgera.
Ikona hamburgera autorstwa projektanta Dave'a Games od razu daje dużo ciepłej energii. Styl kreskówkowy dodaje figlarności i wywołuje tylko najbardziej pozytywne emocje. Możesz bezpiecznie używać takiej ikony na większości nowoczesnych ilustrowanych interfejsów.
Ta ikona fal oceanu została zaprojektowana przez Matta Walkera. Świetnie będzie się czuła na różnych projektach poświęconych morzu. Jasnoniebieski jako główny kolor i obramowanie sprawiają, że ta odznaka jest ekskluzywna.
Przejrzysta, jasna i dowcipna implementacja pozwoli tej konstrukcji działać jak ikona menu w witrynach kulinarnych. W takim przypadku interfejs zyska przyjemny artystyczny smak.
Projektant sugeruje 10 ciekawe wersje odznaki hamburgera, które są wykonane z duszą. Seria obejmuje różne rodzaje burgerów: jeden z serem, drugi z boczkiem, trzeci z indykiem i wiele innych. Jeśli masz witrynę internetową lub aplikacja mobilnadedykowane do restauracji typu fast food, z pewnością się przydadzą. Są tak ciekawe wizualnie, że można je umieścić w prawie każdym temacie.
A ten projekt przedstawia realistycznego hamburgera wektorowego. W tym przypadku guzik zamykający wykonany jest w postaci frytek w kształcie „X”, z sosem lub bez. To kreatywne rozwiązanie, które może dodać egzotyki do projektu Twojej strony.
Oficjalna strona Gwiezdne Wojny zawiera interesującą ikonę hamburgera, która się obraca. Każda linia jest podzielona na dwie części, aby uzyskać wektor odbicia światła mieczy laserowych. Rozwiązanie poprawia ogólne wrażenia z witryny i wzmacnia markę.
Burger Menu autorstwa Petera Twauriego to pięknie ilustrowana wersja ikony. Kluczowa cecha Ta ikona składa się z wybranych kolorów, które naśladują pokrojoną bułkę i kotlet mięsny.
Seria ma różne warianty hamburgerów, które są realizowane w stylu linii. Tutaj znajdziesz podwójnego hamburgera, hamburgera z serem i sałatą, otwartą kanapkę i kilka innych. Znaleźć idealne rozwiązanie aby uzyskać schludny, płaski interfejs, łatwo będzie dodać radość i smak.
Artysta prezentuje trzy zabawne wersje guzika: klasyczny hamburger, cheeseburger i hot dog. Każdy jest oparty na jednym lub dwóch kolorach, dzięki czemu nadaje się do wielu małych interfejsów. Tutaj kolor tworzy odpowiedni rodzaj kanapki.
Artysta oferuje małą animację zawierającą tylko jedną ikonę menu oraz kilka płynnych przejść, które towarzyszą konwersji do zwykłego „X” (przycisk zamykania). Istnieją efekty specjalne, które pojawiają się, gdy mysz jest poruszana lub naciskana.
W przeciwieństwie do większości powyższych przykładów, ta próbka demonstruje umiejętne manipulowanie wagą, a nie kolorem. Górne i dolne linie są odważniejsze niż środek i tworzą odpowiedni wygląd hamburgera. Artysta z powodzeniem poradził sobie z zadaniem.
Menu animacji ikon ninja autorstwa Andrew Kovardakova różni się od większości guzików hamburgerowych i oferuje ciekawe i niecodzienne rozwiązanie, z tajemniczym i atrakcyjnym wydźwiękiem. Tutaj każda linia to ninja wektorów.
A ta ikona jest ilustracją burgera sałatkowo-serowego. Może dodać smaku każdemu nudnemu interfejsowi. Doskonałe rozwiązanie na stronę restauracji lub kawiarni.
W tym artykule można znaleźć ciekawe argumenty na temat modnej ikony menu. Jest oznaczony obrazem przedstawiającym trzy warianty przycisku hamburgera. Pierwsza to płaska ilustracja premium, druga to kolorowa ikona z trzema liniami, a trzecia to monochromatyczna wersja drugiej, która jest najpopularniejszym wyborem wśród projektantów.
GIF pokazuje płynne przejścia między początkowym stanem tej minimalistycznej i eleganckiej ikony a jej stanem końcowym. Ponieważ animacja zaczyna się od dołu, jest krótsza niż pozostałe.
Menu z hamburgerami Liama \u200b\u200bSpradlina wygląda jak zestaw szkolnych zakładek do książek. Ta realizacja jest odważna i nieco szorstka. Taka ikona jest od razu zauważalna, jednak znalezienie odpowiedniego dla niej środowiska może być trudne.
Do tej pory przyglądaliśmy się ikonom osobno, ale dobrze współpracują ze słowami, zwłaszcza gdy jest to słowo „Menu”. Choć może się to wydawać przesadą, razem wyglądają na wyrafinowane. Zastosowane w tym przypadku ultracienkie linie o wielkości 1 piksela pasują do siebie jak elementy układanki.
Projekt udowadnia, że \u200b\u200boprawiona ikona hamburgera może wyglądać jaśniej i atrakcyjniej. To świetny wybór dla małych urządzeń, gdzie taka ikona będzie wygodna do nawigacji dotykowej.
Projektantka prezentuje prostą, zgrabną, trzywierszową ikonę, która przechodzi różne metamorfozy, zamieniając się w krzyż lub strzałę. Animacja zawiera kilka rozwiązań, które mogą się przydać w każdym projekcie.
Wynik
Na pierwszy rzut oka może się wydawać, że nie powinno się poświęcać zbytniej uwagi drobiazgom, takim jak ikona menu. Ale jeśli wykażesz się odrobiną wyobraźni, możesz zamienić ją w jakąś radość dla swojego interfejsu. Zwłaszcza jeśli deweloperzy zaczną bawić się jego znaczeniem i posłużą się artystycznymi sztuczkami, aby uczynić go bardziej niekonwencjonalnym i przyciągającym wzrok.
