Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Создаем панель навигации off-canvas с помощью Foundation 5

by
Length:LongLanguages:

Russian (Pусский) translation by Jenyia (you can also view the original English article)



В предыдущем уроке мы узнали, как настроить верхнюю панель Foundation 4 с помощью CSS. С тех пор ZURB выпустили Foundation 5; быстрее, компактнее и мощнее своего предшественника. Что также заметно, так это то, что ZURB вернул функциональность Off Canvas, которую можно найти в Foundation 3.

Сегодня мы собираемся объединить функцию off-canvas с нашей верхней панелью навигации. Результатом будет удобная пользовательская навигация для пользователей настольных компьютеров и удобное меню для планшетных и мобильных пользователей.

Примечание: Функциональность, которую мы здесь используем, не работает для IE8 и ниже. Я включил исправление для IE9 в ресурсы, перечисленные в конце учебника.

Требования

Чтобы следовать этому руководству, вам понадобится некоторый опыт в следующем:

  • Базовое понимание основы Foundation и системы гридов
  • Знание основ работы с Sass и Compass от Foundation

Начинем

Настройка среды

Если вы еще этого не сделали, включите Compass и Sass, используя документацию Foundation Sass, если вам нужно направление к действию. Если вы уже это сделали, выполните быструю настройку для создания нового проекта Foundation 5 с помощью командной строки:

Командная строка Ruby

Перейдите в ваш рабочий каталог

cd c:/user/your-working-environment

Используйте эту команду для создания своего проекта

foundation new your-project

Перейдите к новому файлу проекта

cd your-project

И используйте эту команду, чтобы компас запустился и скомпилировал ваши файлы Sass

compass watch

Если все прошло успешно, ваш каталог должен выглядеть примерно так:

Директория проекта Foundation 5

Остается только одна вещь, и это нужно для создания нашего файла style.scss. Сделайте это, создав новый файл в папке scss и назовите этот файл style.scss. Нам понадобится этот файл позже. Если вы используете Compass, ваш файл style.scss уже должен быть скомпилирован в файл style.css в папке stylesheets. Отлично, у нас есть все настройки, давайте начнем с кодирования нашей общей HTML-структуры.

Настройка структуры HTML

Шаг 1. Общая разметка

Откройте index.html и удалите весь контент между тегами body, за исключением сценариев непосредственно перед </body>. Мы нуждаемся в них, чтобы все функции Foundation работали. Во-вторых, добавьте следующую строку кода в тег <head>, чтобы убедиться, что мы загружаем наш CSS-файл.

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

Здесь мы добавили раздел заголовка с логотипом, затем основной раздел, разделенный на раздел контента, три службы и призыв к действию. Наконец, есть раздел нижнего колонтитула с тремя столбцами и секцией авторского права. Прямая разметка до сих пор, давайте доберемся до верхней панели!

Шаг 2. Верхняя панель.

Мы собираемся разместить нашу верхнюю панель в разделе класса navigation-section для его стилизации. Мы также присвоим другой класс этому разделу: show-for-large-up. Это гарантирует то, что верхняя панель отображается только для устройств с допустимой минимальной шириной и выше. Это один из многих классов Visibility, которые предоставляет нам Foundation (вы можете больше узнать об этом в документации Foundation). Теперь разметка:

Примечание: Встроим панель в навигацию. Таким образом мы убеждаемся, что JavaScript для нашего Top Bar работает правильно (например, выпадающий список).

Шаг 3: Разметка Off-Canvas

Наше меню будет скрыто за пределами области просмотра. В тот момент, когда мы нажимаем меню, область Offcanvas будет перемещаться (слева в нашем случае) и перемещать содержимое страницы вправо. В нашей настройке мы собираемся исключить заголовок и нижний колонтитул в этом движении. Только область содержимого будет отодвинута в сторону, оставив верхний и нижний колонтитулы на месте.

Кроме того, при прокрутке вниз наш заголовок (который может содержать логотип и, возможно, другой контент), будет отображаться в верхней части страницы (Примечание: на странице должно быть достаточно контента для этого, потому что в противном случае раздел нижнего колонтитула также плавайте над нашим меню Offcanvas). Это означает, что мы должны «обернуть» Off-canvas вокруг нашего основного раздела контента. После раздела навигации верхней панели и перед нашим основным разделом содержимого поместите следующий HTML:

Давайте разделим его. Мы создали два элемента; один с классом off-canvas-wrap и один с классом inner-wrap. Слои скрывает наш контент до момента нажатия кнопки меню. Внутренний слой содержит нашу панель меню навигации, меню левой стороны, а также раздел основного контента. Мы присвоили навигации класс hide-for-large-up, чтобы убедиться, что он отображается только для устройств средней и малой величины. Присвоив тегу aside класс left-off-canvas-menu, мы убедимся, что наше меню появляется слева от экрана. Элементы меню в нашем меню похожи на верхнюю панель. Для off-canvas мы используем неупорядоченный список с классом off-canvas-list, чтобы произошло немного волшебства.

Все, что осталось сделать, - дать пользователю возможность закрыть меню Offcanvas. После этого мы закрываем теги off-canvas-wrap и div-wrap. Добавьте это сразу после закрытия основного раздела.

Шаг 4: результаты до сих пор

Давайте откроем наш браузер и найдем файл index.html, который мы только что отредактировали. Результат должен выглядеть примерно как на скриншотах ниже (попробуйте, измените размер вашего браузера!)

Верхняя панель HTML
HTML Offcanvas

Настройка Sass

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

Шаг 1: Общий стиль

Во-первых, мы придадим нашим общим разделам (заголовок, навигация, основной, нижний колонтитул и авторское право) некоторый цвет. Мы также придадим нашему тегу body приятный цвет фона и добавим класс full-width равный 100%. В HTML мы добавили, что класс полной ширины для разных разделов, чтобы убедиться, что они располагаются до границ браузера. Взгляните на Sass ниже:

Примечание: Чтобы добавить Starry BG, загрузите исходные файлы!

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

Шаг 2: Оформление верхней панели с помощью _settings.scss

Чтобы создать нашу панель, давайте залезем в файл _settings.scss. В зависимости от используемого редактора кода используйте параметр find и введите "Topbar". Здесь вы можете найти все настройки, чтобы настроить стандартную верхнюю панель. Для этого урока мы собираемся использовать два разных варианта; один, чтобы придать нашей панели немного больше высоты, а другой - немного увеличить размер шрифта. Раскомментируйте и измените следующие два параметра:

Шаг 3: Оформление меню с помощью _setting.scss

Мы также собираемся использовать файл настроек для нашего меню. Стандартная надпись довольно хороша, но давайте сделаем так, чтобы раздел навигации был такой же высоты, как и верхняя часть нашей верхней панели. В дополнение к этому, нам нужно будет немного поменять значок гамбургера, чтобы он оставался центрированным сверху. В файле настроек найдите и введите "Off-canvas". Раскомментируйте и измените следующие два параметра:

Шаг 4: Наслаждайтесь результатами

Сохраните файл, пусть compass скомпилирует ваши файлы и обновите браузер. Теперь наша страница более сочная, и снабжена отличной верхней панелью и меню! Ваши результаты должны выглядеть примерно так:

Sass Верхняя панель
Sass Меню

Заключение

Мы создали красивую, адаптивную страницу, используя панель Foundation и меню, добавили немного собственного стиля с помощью Sass, чтобы сделать его немного сочнее и настроили страницу с помощью файла _settings.scss.

Очевидно, мы можем сделать намного больше с _settings.scss, чем я продемонстрировал. Продолжайте экспериментировать с настройками, чтобы увидеть, как легко вы сможете настроить элементы Foundation на своем сайте или попробуйте их в демо версии, чтобы дополнительно настроить меню панели. Повеселись!

Ресурсы



Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.