От автора: меню является частью пользовательского интерфейса на любом сайте. Без разницы, какой ваш сайт – одностраничный или полномасштабный коммерческий проект, каждому веб-сайту необходимо меню, чтобы пользователи могли легко перемещаться по страницам или разделам. Вслед за Сеткой из предыдущего урока по Material Design Lite мы рассмотрим очередной компонент MDL: меню.
Не забудьте подключить библиотеки MDL, файлы стилей и скрипты перед тем, как продолжить:
|
1 2 3 4 |
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link href='//fonts.which is googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" /> <script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script> |
Вот теперь мы готовы к созданию меню.
Базовое меню
Меню в MDL относится к подкомпоненту макета наряду с такими элементами как сетка, табы и футер. Базовое меню в MDL включает в себя название сайта, несколько ссылок меню, а также выдвигающееся меню. Для создания меню добавьте пустой DIV с классами mdl-layout и mdl-js-layout. mdl-layout добавляет базовые стили, отвечающие за UI. А класс mdl-js-layout добавляет динамику с помощью JS: добавление новых элементов и новых дополнительных классов, отвечающих за работу функций.
|
1 2 |
<div class="mdl-layout mdl-js-layout"> </div> |
Внутри DIV добавьте HEADER с классом mdl-layout__header.
|
1 2 3 4 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> </header> </div> |
Внутри хедера создайте DIV с классом mdl-layout__header-row. В этом блоке и будет находиться наше меню.
|
1 2 3 4 5 6 7 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> </div> </header> </div> |
Оберните название сайта тегом span с классом mdl-layout-title, затем добавьте ссылку с адресом на свой сайт. Текст названия сайта можно вполне поменять на логотип.
|
1 2 3 4 5 6 7 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Acme</span> </div> </header> </div> |
Под span’ом с названием сайта создайте DIV с классом mdl-layout-spacer. Этот блок (спейсер) добавит пространство после названия сайта, а позже пригодится для выезжающего меню вправо.
|
1 2 3 4 5 6 7 8 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Acme</span> <div class="mdl-layout-spacer"></div> </div> </header> </div> |
После спейсера создайте элемент nav со ссылками меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Acme</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Home</a> <a class="mdl-navigation__link" href="#">Blog</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> </div> </header> </div> |
И наконец, осталось добавить DIV с классом mdl-layout__drawer прямо за хедером, в нем будет наше выезжающее меню.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Acme</span> <div class="mdl-layout-spacer"></div> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Home</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Acme</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Products</a> <a class="mdl-navigation__link" href="#">Services</a> <a class="mdl-navigation__link" href="#">Portfolios</a> <a class="mdl-navigation__link" href="#">Achievements</a> <a class="mdl-navigation__link" href="#">Blog</a> </nav> </div> </div> </div> |
Если обновить страницу, то меню должно уже заработать; должна появиться иконка гамбургера. Попробуйте кликнуть на нее:
Однако, если заметить, то панель основного меню пока что скрыта. MDL прячет такое меню на экранах с разрешением планшета, техническое решение команды MDL. Горизонтальное меню плохо приспособлено к большому количеству ссылок. В какой-то момент на маленьком экране пункты горизонтального меню вылезут за рамки и приведут или к ошибкам, или к наложению на другие элементы интерфейса.
Если нам необходимо оставить горизонтальное меню видимым на маленьких экранах, добавьте эти два класса mdl-layout—fixed-header и mdl-layout.
|
1 2 3 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> ... контент ... </div> |
Этот класс принудительно заставит отображать горизонтальное меню, как на планшетах, так и на мобильных устройствах.
Добавляем форму поиска
Формы поиска крайне распространенный элемент в меню веб-сайтов. Такие формы очень полезны для пользователей, если те не знают точно, какой пункт меню им нужен. В форму поиска можно просто вбить требуемый запрос. Добавьте HTML код ниже рядом с элементов nav.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> ... контент ... <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Home</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> <!—- начало формы поиска --> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" id="search-expandable" /> <label class="mdl-textfield__label" for="search-expandable">Search text</label> </div> </div> <!—- конец формы поиска --> ... контент ... </div> |
В коде выше мы добавили два элемента MDL: текстовое поле и кнопка. Кнопка это иконка поиска, при нажатии на которую выезжает текстовое поле:
Последние размышления
Меню в MDL крайне наворочено, что позволяет очень тонко его настраивать. В этом уроке мы всего лишь построили базовое меню с помощью основных классов.
Меню можно расширить еще больше с помощью служебных классов или других компонентов MDL. К примеру, можно сделать прозрачный фон или задать фоновое изображение, сделать выезжающее меню всегда видимым, сделать меню нестатичным, или даже заменить ссылки на якоря на секции в том случае, если сайт одностраничный.
Меню также является необязательным элементом.
Паддинг слева от меню в 72px, к примеру, нужен для того, чтобы вместить иконку гамбургера для выезжающего меню. Иногда на сайте хватает и базового меню со стандартными функциями. Но всеже, элемент меню очень громоздкий, и я жду не дождусь выхода дополнительных функций и улучшений.
Автор: Thoriq Firdaus
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
