Изучение Material Design Lite: Меню

Изучение Material Design Lite: Сетка

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

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

Вот теперь мы готовы к созданию меню.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Базовое меню

Меню в 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, затем добавьте ссылку с адресом на свой сайт. Текст названия сайта можно вполне поменять на логотип.

Под span’ом с названием сайта создайте DIV с классом mdl-layout-spacer. Этот блок (спейсер) добавит пространство после названия сайта, а позже пригодится для выезжающего меню вправо.

После спейсера создайте элемент nav со ссылками меню.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

И наконец, осталось добавить DIV с классом mdl-layout__drawer прямо за хедером, в нем будет наше выезжающее меню.

Если обновить страницу, то меню должно уже заработать; должна появиться иконка гамбургера. Попробуйте кликнуть на нее:

Однако, если заметить, то панель основного меню пока что скрыта. MDL прячет такое меню на экранах с разрешением планшета, техническое решение команды MDL. Горизонтальное меню плохо приспособлено к большому количеству ссылок. В какой-то момент на маленьком экране пункты горизонтального меню вылезут за рамки и приведут или к ошибкам, или к наложению на другие элементы интерфейса.

Если нам необходимо оставить горизонтальное меню видимым на маленьких экранах, добавьте эти два класса mdl-layout—fixed-header и mdl-layout.

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

Добавляем форму поиска

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

В коде выше мы добавили два элемента MDL: текстовое поле и кнопка. Кнопка это иконка поиска, при нажатии на которую выезжает текстовое поле:

Последние размышления

Меню в MDL крайне наворочено, что позволяет очень тонко его настраивать. В этом уроке мы всего лишь построили базовое меню с помощью основных классов.

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

Меню также является необязательным элементом.

Паддинг слева от меню в 72px, к примеру, нужен для того, чтобы вместить иконку гамбургера для выезжающего меню. Иногда на сайте хватает и базового меню со стандартными функциями. Но всеже, элемент меню очень громоздкий, и я жду не дождусь выхода дополнительных функций и улучшений.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree