От автора: если вы уже пользовались Foundation, то могли заметить, что компоненты меню и навигации немного скудны. Если вам необходимо было сделать меню с иконками или горизонтальное меню, то вам приходилось использовать именно компоненты под каждый случай (а если вам хотелось что-то еще, то их нужно было настраивать под себя).
С выходом Foundation 6 все изменилось. Что нового в Zurb Foundation 6? Шестая версия стала самой переработанной за все время, и Zurb удалось упростить процесс настолько, что вы теперь можете разрабатывать более мощные вещи.
В прошлой статье я рассмотрел множество новых особенностей Foundation 6. В этой же статье я вам расскажу про меню. Вы узнаете, что команда Zurb теперь предоставляет урезанную сборку, а также набор очень полезных JS плагинов, которые делают систему меню еще лучше.
Модернизация меню
В Foundation 6 компоненты навигации подверглись серьезной реконструкции. В Foundation 5 у вас был огромный выбор вариантов меню. Каждое меню имело собственную разметку, настройки и стили. В последней версии Zurb переработали все эти меню в одно большое с множеством настроек. Приведенные ниже типы меню отсутствуют в новой версии:
Inline List – Использовалось для создания обычного горизонтального меню.
Side Nav – Использовалось для создания вертикального меню. Обычно используется в сайдбарах и других вертикальных областях.
Icon Bar – Использовалось для отображения пунктов меню с иконками (или просто иконок).
Sub Nav – Использовалось для создания элементов поднавигации, таких как ссылки на части одной страницы.
Все это было заменено на один компонент Menu. Меню само по себе очень простое. Вы задаете разметку со ссылками a и элементами списка li внутри тега ul. Тегу ul присваивается класс menu:
|
1 2 3 4 5 |
<ul class="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> |
В новом компоненте меню все тот же старый функционал из пятой версии, но вместо множества типов добавились опции типа меню. Можно выбрать вертикальное меню, горизонтальное, с иконками и т.д.
Простое меню
По умолчанию класс menu добавляет паддинги, легкий цвет и другие стили, чтобы помочь вам в работе. Если вы хотите все настроить самостоятельно, можете добавить класс .simple к меню, и большинство стилей удалится.
|
1 2 3 4 5 6 |
<!—-Базовое меню почти без стилей --> <ul class="menu simple"> <li><a href="#">Vanilla</a></li> <li><a href="#">Strawberry</a></li> <li><a href="#">Chocolate</a></li> <ul> |
Горизонтальное и вертикальное меню
По умолчанию меню имеет горизонтальный вид и работает точно так же, как в Foundation 5. Если вы хотите сделать вертикальное меню, необходимо просто добавить класс vertical. Такое меню можно использовать, к примеру, для создания списка последних новостей.
|
1 2 3 4 5 6 |
<!-- Базовое вертикальное меню со списком статей из блога --> <ul class="menu vertical"> <li><a href="#">Dynamic Interactivity, 21st December 2015</a></li> <li><a href="#">Web Fundamentals, 12th December 2015</a></li> <li><a href="#">Intro to CSS, 02nd December 2015</a></li> </ul> |
Подменю и вложенность
Если вы хотите сделать меню второго уровня, то вы, скорее всего, воспользуетесь одним из плагинов для меню, таким как dropdown/drilldown компонент. Однако вы так же просто можете сделать подпункты со смещением влево в вертикальном меню при помощи класса nested:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- используем класс nested для создания Подпунктов в вертикальном меню --> <ul class="menu vertical"> <li><a href="#">Course One</a> <ul class="menu vertical nested"> <li><a href="#">Course One - One</a></li> <li><a href="#">Course One - Two</a></li> </ul> </li> <li><a href="#">Course Two</a></li> </ul> |
Меню с иконками
Меню с иконками отлично работает в дизайнах под приложения и может функционировать с минимальным набором стилей.
К стандартному меню добавляется иконка в теге span внутри ссылки a. В качестве иконки можно использовать изображение или один из шрифтов Foundation Icon Font.
Если вам больше нравятся шрифты-иконки, то их необходимо подключить вручную в проект. Вместо span необходимо использовать тег i с нужным классом.
|
1 2 3 4 5 6 7 |
<!-- Простое меню с иконками со шрифтом иконок Foundation --> <ul class="menu"> <li><a href="#"><i class="fi-save"></i> <span>Save</span></a></li> <li><a href="#"><i class="fi-x"></i> <span>Delete</span></a></li> <li><a href="#"><i class="fi-arrow-left"></i> <span>Back</span></a></li> <li><a href="#"><i class="fi-arrow-right"></i> <span>Forward</span></a></li> </ul> |
От нас требуется всего лишь добавить правильный класс к тегу i! По умолчанию макет имеет горизонтальное расположение с иконками слева от пунктов. Если требуется разместить иконки над пунктами меню, можно добавить класс .icon-top. Такой вариант больше похож на мобильное меню, где маленькие иконки размещены над текстом.
Dropdown, Drilldown и Accordion
Стандартное меню отличное, но иногда требуется что-то более мощное, меню, динамически выводящее дочерние элементы меню. В Foundation 6 включены предыдущие версии Dropdown, Drilldown и Accordion меню. Этими меню можно управлять при помощи клавиатуры, а также можно использовать семантическую разметку для облегчения разработки. Так как данные типы меню используют JS библиотеку, необходимо создать объект меню:
Если в вашем билде меню уже подключено, можно вызвать $(document).foundation() или
Подключить свое собственное меню и создать его. К примеру, для создания drilldown меню необходимо создать переменную var elem = new Foundation.Drilldown(element) (после подключения требуемых зависимостей).
Dropdown menu должно быть вам знакомо. Это стандартный дизайн меню, когда при нажатии на родительский элемент выезжают дочерние пункты меню (также при наведении мыши или нажатии клавиши на клавиатуре). Чтобы придать меню динамики, необходимо добавить атрибут data-dropdown-menu.
Drilldown menu отличается тем, что вместо отображения подпунктов сверху или снизу от родительского пункта меню, выезжает новое меню поверх старого. Такое меню позволяет вам в поисках нужного пункта «забраться» на Х уровень. Очень удобное меню, особенно когда у вас мало места на экране, как не мобильном телефоне.
JavaScript генерирует кнопку возврата на предыдущий уровень меню и обрабатывает ее позиционирование. От вас требуется добавить атрибут data-drilldown ко всем пунктам меню.
Accordion menu работает по принципу аккордеона. По клику на родительские пункты раскрываются дочерние. Для включения данного меню необходимо добавить атрибут data-accordion-menu к верхнему уровню menu.
У всех плагинов есть свои функции, события и опции, которые можно настраивать под себя. К примеру, если вы хотите добавить какой-либо функционал при закрытии подменю в меню аккордеон, то необходимо встроиться в событие up.zf.accordion menu. К примеру:
|
1 2 3 4 |
// делаем что-нибудь при закрытии аккордеона $('.my-accordion-menu').on('up.zf.accordion menu', function() { alert('Menu Closed'); }); |
В общем и целом функции, события и опции данных типов меню были упрощены в Foundation 6. Если вы использовали данные типы меню в Foundation 5, то вам должно быть интересно, как они изменились.
Адаптивная навигация
Эта новинка в Foundation 6. Раньше если вы хотели отображать разные стили меню на разных устройствах, вам приходилось делать несколько меню и показывать/прятать их. В последней версии фреймворка можно создать одно адаптивное меню, которое будет динамически изменяться в зависимости от разрешения экрана/устройства.
Сначала задаем меню как обычно:
|
1 2 3 4 5 |
<ul class="menu"> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> </ul> |
Чтобы сделать меню адаптивным необходимо добавить атрибут data-responsive-menu и соблюсти следующие условия:
Тип меню по умолчанию (к примеру, drilldown, dropdown или accordion)
Дополнительное меню под другой размер экрана. К примеру, small-dropdown, medium-drilldown, large-dropdown и т.д.
Эти данные позволят нашему меню трансформироваться в зависимости от подаваемых значений. Полезно, если вы хотите добавить обычное меню с выпадающим списком на больших экранах устройств, а на маленьких экранах возвращаться к вертикальному меню аккордеону или drilldown.
Если вы вручную настроили классы разрешений экрана, то можно задать еще больше комбинаций (к примеру, показывать меню с выпадающим списком на экстра больших экранах, а на просто больших и ниже – drilldown меню).
Компонент топ бар
Нужно еще упомянуть о компоненте Top Bar. Данный компонент, как и все другие был переделан. В топ баре есть и левая и правая секция. Основное меню можно поместить в левую часть, а поиск и различные кнопки в правую. Базовая разметка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="top-bar" id="top-bar"> <div class="top-bar-left"> <ul class="dropdown vertical medium-horizontal menu"> <li><a href="#">Monday</a></li> <li><a href="#">Tuesday</a></li> <li><a href="#">Wednesday</a></li> <li><a href="#">Thursday</a></li> <li><a href="#">Friday</a></li> </ul> </div> <div class="top-bar-right"> <ul class="dropdown vertical medium-horizontal menu"> <li><a href="#">January</a></li> <li><a href="#">February</a></li> <li><a href="#">March</a></li> <li><input type="search" placeholder="Search"></li> </ul> </div> </div> |
В данный тип меню можно вставить что угодно. Однако для того, чтобы компоненты заработали, придется повозиться (к примеру, хорошо делать внутренние меню выпадающим списком или вертикальными, чтобы они хорошо работали на мобильных устройствах).
Если вы хотите добавить переключение меню под мобильные устройства (что в Foundation 5 было частью компонента), то можно воспользоваться responsive toggle.
Суть в том, что на маленьких экранах будет отображаться переключатель, который будет показывать и прятать меню. В документации все подробно описано, но данное меню с базовыми настройками и так будет работать отлично в большинстве случаев.
|
1 2 3 4 5 |
<div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">Main Menu</div> </div> |
Здесь очень важен атрибут data-responsive-toggle, который нужен для связи с id меню, которым вы хотите управлять (вот почему у нас это top-bar). На экране будет показана кнопка, которая переключит меню только в том случае, если сайт просматривается на маленьком экране.
Примеры меню
Ниже CodePen демо с несколькими способами применения нового компонента меню. Если вы хотите настроить под себя опции и установки по умолчанию, то лучшим источником будет menu documentation.
Значительное уменьшение кода
От модернизации компонентов меню в Foundation 6 есть два основных плюса. Первый это снижение сложности (теперь все типы меню управляются одним menu с разными опциями). Второе преимущество более тонкое, это значительное снижение размера фреймворка.
Обновленный компонент меню вобрал в себя 5+ разных структур меню, а значит, все старые CSS стили, которые раньше использовались в фреймворке, были удалены. Даже если учесть, что в блоге Zurb цифры слегка приукрашены, в любом случае они удалили больше 1000 строк стилей, объединив все меню в одно.
Для разработчиков уменьшение кода всегда приятно. Фреймворк весит меньше, загружается быстрее, его легче изучать, а также в дальнейшем его будет легче обновлять.
Заключение
Foundation 6 сильно «похудел» в подавляющем большинстве своих компонентов. Если раньше вам требовалось использовать несколько различных компонентов для создания меню, то теперь это один очень гибкий компонент. Комбинация из различных плагинов меню и глубоко пересмотренного билда меню создала один мощный и простой компонент, который вы обязательно должны попробовать во всех своих проектах на Foundation.
Автор: Simon Codrington
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
