Вивчення Material Design Lite: Меню

Від автора: меню є частиною інтерфейсу на будь-якому сайті. Без різниці, який ваш сайт – односторінковий або повномасштабний комерційний проект, кожному веб-сайту необхідно меню, щоб користувачі могли легко переміщатися по сторінках або розділів. Слідом за Сіткою з попереднього уроку з Material Design Lite ми розглянемо черговий компонент MDL: меню.

Не забудьте підключити бібліотеки MDL, файли стилів і скрипти перед тим, як продовжити:

Ось тепер ми готові до створення меню.

Базове меню

Меню в MDL відноситься до подкомпоненту макета поряд з такими елементами як сітка, таби і футер. Базове меню в MDL включає в себе назву сайту, кілька посилань меню, а також висуваються меню. Для створення меню додайте порожній DIV з класами mdl-layout і mdl-js-layout. mdl-layout додає базові стилі, що відповідають за UI. А клас mdl-js-layout додає динаміку з допомогою JS: додавання нових елементів і нових додаткових класів, що відповідають за роботу функцій.

Всередині DIV додайте HEADER з класом mdl-layout__header.

Всередині хедера створіть DIV з класом mdl-layout__header-row. У цьому блоці і буде перебувати наше меню.

Оберніть назва сайту тегом span з класом mdl-layout-title, потім додайте посилання з адресою на свій сайт. Текст назви сайту можна цілком поміняти на логотип.

Acme

Під span’ом з назвою сайту створіть DIV з класом mdl-layout-spacer. Цей блок (спейсер) додасть простір після назви сайту, а пізніше стане в нагоді для виїжджає меню праворуч.

Acme

Після спейсера створіть елемент nav з посиланнями меню.

Acme

Home
Blog
About
Contact

І нарешті, залишилося додати DIV з класом mdl-layout__drawer прямо за хедером, в ньому буде наше виїжджає меню.

Acme

Home
About
Contact

Acme
Products
Services
Portfolios
Achievements
Blog

Якщо оновити сторінку, то меню має вже заробити; повинна з’явитися іконка гамбургера. Спробуйте натиснути на неї:

Однак, якщо зауважити, панель основного меню поки що прихована. MDL ховає таке меню на екранах з роздільною здатністю планшета, технічне рішення команди MDL. Горизонтальне меню погано пристосоване до великої кількості посилань. У якийсь момент на маленькому екрані пункти горизонтального меню вилізуть за рамки і призведуть або до помилок, або до накладення на інші елементи інтерфейсу.

Якщо нам необхідно залишити горизонтальне меню видимим на маленьких екранах, додайте ці два класи mdl-layout—fixed-header і mdl-layout.

Цей клас примусово змусить відображати горизонтальне меню, як на планшетах, так і на мобільних пристроях.

Додаємо форму пошуку

Форми пошуку вкрай поширений елемент в меню веб-сайтів. Такі форми дуже корисні для користувачів, якщо ті не знають точно, який пункт меню їм потрібен. У форму пошуку можна просто вбити потрібний запит. Додайте в HTML код нижче поруч з елементів nav.

У коді вище ми додали два елемента MDL: текстове поле і кнопка. Кнопка це іконка пошуку, при натисканні на яку виїжджає текстове поле

Останні роздуми

Меню в MDL вкрай накручено, що дозволяє дуже тонко його налаштовувати. У цьому уроці ми лише побудували базове меню з допомогою основних класів.

Меню можна розширити ще більше за допомогою службових класів або інших компонентів MDL. Наприклад, можна зробити прозорий фон або встановити фонове зображення, зробити виїжджає меню завжди видимим, зробити меню нестатичным, або навіть замінити посилання на якорі на секції у тому випадку, якщо односторінковий сайт.

Меню також є необов’язковим елементом.

Паддінґ зліва від меню в 72px, наприклад, потрібен для того, щоб вмістити іконку гамбургера для виїжджає меню. Іноді на сайті вистачає і базового меню зі стандартними функціями. Але всеж, елемент меню дуже громіздкий, і я чекаю не дочекаюся виходу додаткових функцій і поліпшень.