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

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

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

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

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://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: добавление новых элементов и новых дополнительных классов, отвечающих за работу функций.

<div class="mdl-layout mdl-js-layout">
</div>

Внутри DIV добавьте HEADER с классом mdl-layout__header.

<div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
    </header>
</div>

Внутри хедера создайте DIV с классом mdl-layout__header-row. В этом блоке и будет находиться наше меню.

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

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

<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 со ссылками меню.

<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 прямо за хедером, в нем будет наше выезжающее меню.

<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.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  ... контент ...
</div>

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

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

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

<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

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

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

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

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

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

Метки: , ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree