Всім привіт. З вами Corvax. Сьогодні я хочу продовжити тему мобільних меню і запропонувати вам зробити але тільки використовуючи jQuery. Поїхали.
Створення HTML макета
Додати улюблені 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; padding: 10px 15px; cursor: pointer; display: none;) body (height: 100%;) @media (max-width: 640px) (.menuToggle (display: block;) .menu (display: none; position: absolute ; background: # 3e2597; width: 100%; margin-left: -10px; padding-left: 10px;) .menu li (float: none;))Додавання JS
Після того як ми верстали саме меню нам понадобіртся підключити JS файл і приступити до найцікавішого.
$ (Function () ($ ( ". MenuToggle"). On ( "click", function () ($ ( ". Menu"). SlideToggle (300, function () (if ($ (this) .css ( " display ") \u003d\u003d\u003d" none ") ($ (this) .removeAttr (" style ");)));));));
Давайте докладніше розглянемо що тут напісна. На початку ми вішаємо собітие.on при натисканні на саму кнопку «Меню». В середині цієї події ми добовляем на $ ( «. Menu») виподающее меню функцію slideToggle () яка буде виробляти плавне відкриття і закриття виподающего меню.
Є невелика проблема яка у нас виникне при переході версій сайту і нажите на кнопку «Меню», а саме буде ховатися блок з самими пунктами меню тому за замовчуванням функція slideToggle () при закриття додає атребут «display: none». Що б виправити цей баг потрібно викликати колбек (функція яка буде визиватся після відпрацювання основної функції) для функції slideToggle (). В середині колбек ми пишемо умова. Якщо у нас Атрібі в блоці меню дорівнює «display: none» тоді ми видаляємо етрібут «style».
висновок
Ось так отчень просто і швидко ми створили адаптивно меню «гамбургер» яке ви можете лекго використовувати в смоіх проектах. ви можете завантажити вихідні. З вами був Corvax. Так нових зустрічей!
Ви напевно вже втомилися читати статті і постійно слухати різні дискусії про трьох коротких лініях гамбургер-меню. Це поганий прийом в дизайні інтерфейсів? Або непоганий? Цей піст не такий - він не буде судити, добре чи погане це меню. Суть в тому, що я вважаю його не найкращим дизайн-рішенням, так чи інакше. Але і у гамбургер-меню є свої сильні сторони, особливо при використанні в мобільному дизайні, в умовах обмеженого простору. Так що ми можемо зробити? Просто прийняти гамбургер-меню таким, яке воно є, незважаючи на всі недоліки, і жити далі? Багато сайтів і додатків, здається, змирилися з цим. А я вважаю, що здатний на краще.
А потім сталися дві речі, які змусили мене передумати. По-перше, я натрапив на. Це стаття, яка дійсно допомагає зрозуміти наслідки використання гамбургер-меню. Зокрема, сайти з таким меню терплять серйозне зменшення залученості користувачів. Огляд такої статистики якраз і почав міняти моя думка.
Наступний інцидент стався, коли я спостерігав за колегою, які намагаються використовувати нове веб-додаток, в якому якраз було таке меню. Це був розробник, який дуже добре знайомий з інтерфейсом гамбургер-меню, але коли справа дійшла до використання програми для своїх потреб, він голосно вголос запитав: "Як мені туди потрапити?". Врахуйте, це один з найрозумніших людей, Яких я знаю, і він навіть не подумав про те, щоб торкнутися значка гамбургер-меню. Якщо у кого-то настільки розумного виникають проблеми з навігацією, що це говорить про типовий користувача? Моя думка остаточно набуло тверде обгрунтування.
Пошук рішення
Все, вистачить про причини мого невіри в силу гамбургер-меню - настав час поговорити про рішення. Для початку я вивчив особливі переваги використання гамбургер-меню:
- масштабованість: Це, напевно, головний плюс і головна причина, чому так багато сайтів і додатків вибирають його. Ви можете помістити дуже багато елементів навігації за маленькою іконкою.
- акуратність: Це йде в пару до масштабованості, але все ж, не одне й те саме. Дизайнери хочуть створювати лаконічні та акуратні дизайни, залишаючи досить місця для основного контенту. Використання гамбургер-меню надає відчуття візуальної простоти, привабливе для будь-якого дизайнера.
І якщо вже створювати альтернативу гамбургер-меню, вона повинна якось вирішувати пов'язані з ним проблеми:
- зрозумілість: Повинна бути можливість легко знаходити елементи навігації, особливо тими, хто використовує продукт вперше.
- залученість: Інтерфейс повинен давати підказки та фідбек, що пояснюють, що користувач може робити з продуктом, і коли доречно використовувати ті чи інші можливості.
Складна частина: мобільна
Я вирішив почати з самої складної проблеми і перевірити, чи підійде моє рішення для мобільних дизайнів. Після обмірковування маси ідей я прийшов до висновку, що меню панелі вкладок iOS є одним з кращих рішень для мобільних інтерфейсів. Маса людей намагалися зробити панель вкладок прокручуваному (щоб вміщалося більше п'яти опцій) або додати "more" в навігацію - щось на зразок Плюшкіна, у якого є додаткова кімната, яка швидко заповниться мотлохом. Також, обидві ці опції все ще не виконують головної вимоги - зрозумілість, видимість всіх можливостей відсутня. Так що ж можна зробити з меню вкладок, щоб це виправити?
Моє рішення полягає в комбінації гамбургера і панелі вкладок в єдиний підхід. В результаті виходить панель вкладок, яка відкриває набір опцій для кожного елемента меню.
Я створив тестове додаток за оцінкою продуктивності команди, щоб проілюструвати свій підхід в справі. Використовуючи цей спосіб, користувач може чітко бачити основні функції та способи використання продукту. І замість засипання повним списком елементів меню, прихованого за іконкою гамбургера, користувачеві показується кілька опцій, які відносяться до вкладки, на яку він клікнув. Так навігацію простіше зрозуміти і переварити, все потрібне завжди під рукою, дозволяє користувачеві бачити ієрархію додатки.
Ще один плюс такого дизайну - можливість використовувати контекстні повідомлення. У випадку з гамбургер-меню у вас є всього одне місце для показу таких повідомлень. Якщо дотримуватися макета з панеллю вкладок, ви можете видавати підказки для користувача в будь-якому з обраних пунктів меню.
Звичайно, найбільша перемога такого підходу - Масштабованість. Так, ви як і раніше обмежені п'ятьма категоріями, але це і добре. Чесно, думаю, що будь-який сайт може вмістити свої опції в п'ять категорій, якщо дизайнер з розумом продумає навігацію. Адже в кожній з цих категорій може бути ще по п'ять або шість підпунктів.
Разом виходить 30 можливих опцій навігації без відчуття перевантаження для користувача і без окупації всього простору екрану.
Застосування до планшетів
Інтеграція такої панелі вкладок в планшети, як вона є, виглядала дивною. Планшети набагато ширше, і використання того ж UI, що і для мобільних пристроїв, Виглядало так само безглуздо, як підліток в одязі, з якої він давно виріс. Так що я пішов іншим шляхом. Замість розміщення панелі вкладок внизу, я розмістив її збоку. Так виявилося зручніше в плані використання простору екрану і виглядало дуже природно. До того ж багато користувачів тримають планшет за бік, так що це як раз цільова область для торкання пальцями.
А як на рахунок робочого столу?
Приготуйтеся ... висувне меню. Все вірно - приміряйте цей підхід до десктопних інтерфейсу і ви зіткнетеся з незаперечною реальністю: цей варіант зовсім не новий. Висувне меню використовувалося роками, і практично будь-який користувач (навіть ваша мама) знає, як воно працює. В цьому і є принадність такого підходу - нічого нового.
повне розкриття
Я не знаю, як назвати цю штуку. Вкладочному видвіжнік? Або TABurger (TAB "вкладка" + бургер)? Більш того, я не знаю, створював чи хто-небудь подібне рішення раніше. З огляду на простоту такого меню, я не можу допустити думку, що я був першим. Знаю, що кілька додатків використовують висувні меню на деяких кнопках вкладок (наприклад, Tweetbot), але зазвичай вони реалізовані як швидкий доступ до функцій для просунутих користувачів, а не з метою нарощування ієрархії навігації. Якщо у вас є такий приклад, дайте знати в коментарях.
Неважливо, чи є таке меню новим або вже давно придуманим. Важливим є те, чи є воно кращим, більш креативним рішенням для навігації в порівнянні з гамбургер-меню. Перестаньте говорити собі "В цьому крутому сайті є таке меню, значить, воно повинно бути кращим" або "Все так роблять, значить це правильно". Дизайн заслуговує на краще, більш уважного підходу.
ОНОВЛЕННЯ
Коллін Ебергардт зазначив в Твіттері, що такий же UI реалізований в Windows Phone. Я сам користувач Windows Phone, і він має рацію. Хоча такий тип взаємодій використовується в Windows Phone тільки для опції "more" в панелі вкладок.
Джеймс Періха привів ще один приклад в Твіттері. Подивіться на AHTabBarController, створений Артуром Хеммер.
Простий, функціональний, інтуїтивно зрозумілий і запам'ятовується, як і будь-який дорожній знак, іконка-гамбургер стала справжнім трендом в минулому році, і невід'ємним елементом будь-якого сучасного веб-сайту і дизайну мобільних додатків.
Цей простий значок імітує зовнішній вигляд списку меню, ідеально підходить для пристроїв з невеликими екранами і веб-сайтів, де важлива візуальна сторона, а навігація повинна стояти осторонь. Це дуже ефективний і життєздатне рішення, яке відповідає вимогам сучасного світу.
Як і будь-який інший елемент інтерфейсу, іконка-гамбургер може мати деякі відхилення від початкового варіанту, виходячи з потреб кожного окремого проекту.
Залежно від проекту і теми, значок-гамбургер може приймати різні форми, які доповнюють дизайн або можуть стати його самостійної, відмінною рисою.
Сьогоднішня колекція включає в себе 20 різних варіацій іконки-гамбургера.
Іконка-гамбургер від дизайнера Дейва ГЕЙМЗ відразу ж дарує багато теплої енергії. Мультяшний стиль додає грайливості, і створює тільки найпозитивніші емоції. Використовувати таку іконку можна сміливо на більшості сучасних ілюстрованих інтерфейсів.
А цю іконку з океанськими хвилями розробив Мет Уокер. Вона відмінно буде відчувати себе на різних проектах, присвячених морю. Блакитний в якості основного кольору і рамка навколо роблять цей значок ексклюзивним.
Чистий, яскрава і дотепна реалізація дозволить цій конструкції працювати як значок меню на кулінарних сайтах. В цьому випадку інтерфейс отримає приємну художню родзинку.
Дизайнер пропонує 10 цікавих версій значків-гамбургерів, які виготовлені з душею. Серія охоплює різні види бургерів: один з сиром, інший з беконом, третій з індичкою, і багато інших. Якщо у вас є веб-сайт або мобільний додаток, Присвячене ресторану швидкого харчування, то вони, безумовно, стануть в нагоді. Вони так візуально цікаві, що зможуть знайти місце практично в будь-якій темі.
А цей проект представляє реалістичний гамбургер у векторі. Кнопка закриття при цьому виконана у вигляді картоплі фрі, що приймає форму «Х», з соусом або без. Це креативне рішення, яке може додати екзотику в дизайн сторінки.
Офіційний сайт Star Wars включає в себе цікавий значок-гамбургер, який повертається. Кожен рядок розділена на дві частини так, щоб отримати вектор відбиття світла лазерних мечів. Рішення підсилює загальне враження від сайту і зміцнює бренд.
Бургер меню від Пітера Тваурі - це прекрасно ілюстрована версія іконки. ключова особливість цього значка полягає у виборі кольорів, що імітують розрізану булочку і м'ясну котлету.
Серія має різні варіанти гамбургерів, які реалізуються за допомогою стилю лінії. Тут ви знайдете подвійний гамбургер, гамбургер з сиром і салатом, відкритий бутерброд і деякі інші. знайти ідеальне рішення для вашого акуратного, плоского інтерфейсу буде просто, щоб додати пікантності і «смаку».
Художник демонструє три кумедні версії кнопки: класичний гамбургер, чізбургер і хот-дог. В основі кожного лежить один або два кольори, що робить його придатним для різних крихітних інтерфейсів. Тут колір створює правильний вид бутерброда.
Художник пропонує невелику анімацію, яка включає тільки один значок меню, і кілька плавних переходів, які супроводжують перетворення в звичайний «X» (кнопку закриття). Є спеціальні ефекти, що виникають при наведенні мишки або натисканні.
На відміну від більшості наведених вище прикладів, цей зразок демонструє вмілі маніпуляції з вагою, а не кольором. Верхня і нижня лінії сміливіше, ніж середня, і створюють правильний вид «гамбургера». Художник успішно впорався із завданням.
Меню анімація значка-ніндзя від Ендрю Ковардакова відрізняється від більшості кнопок-гамбургерів, і пропонує цікаве і неабияке рішення, з таємничим і привабливим підтекстом. Тут кожна лінія - ніндзя в векторі.
А ця ікона є ілюстрацію бургера з салатом і сиром. Це може додати родзинку в будь-який нудний інтерфейс. Відмінне рішення для сайту ресторану або кафе.
Це стаття, де ви можете знайти цікаві міркування про модний значку меню. Вона відзначена зображенням, яке показує три варіанти кнопки-гамбургер. Перший - це першокласна плоска ілюстрація, другий - розфарбований значок з трьох ліній, і третій є монохроматичної версією другого зразка - це найпопулярніший вибір серед дизайнерів.
GIF показує плавні переходи між початковим станом цього мінімалістичного і елегантного значка, і його кінцевий стан. Оскільки анімація починається з нижнього рядка, він коротший, ніж інші.
Гамбургер меню від Ліам Спрадлін виглядає як набір шкільних закладок для книг. Реалізація ця - смілива і кілька груба. Такий значок відразу помітний, проте, може бути важко знайти відповідне середовище для нього.
До сих пір ми розглядали іконки окремо, але вони прекрасно співпрацюють зі словами, особливо, коли це слово «Меню». Хоча це може бути зайвим, разом вони виглядають вишукано. Ультратонкі лінії шириною в 1px, які використовуються в цьому випадку, поєднуються як частини головоломки.
Проект доводить, що значок-гамбургер може виглядати яскравіше і привабливіше, коли він укладений в рамку. Це відмінний вибір для невеликих пристроїв, Де така іконка буде зручною для сенсорної навігації.
Дизайнер відображає простий, гладкий значок з трьох ліній, який піддається різним метаморфоз, перетворюючись в хрестик або стрілку. Анімація включає в себе кілька рішень, які можуть стати в нагоді для будь-яких проектів.
підсумки
На перший погляд може здатися, що таку дрібницю, як іконка меню, не варто приділяти багато уваги. Але якщо проявити трохи фантазії, можна перетворити його в якусь родзинку вашого інтерфейсу. Особливо, якщо розробники починають грати з його змістом, і використовують художні прийоми, щоб зробити його більш нетрадиційним і привертає увагу.
