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

() translation by (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 с помощью командной строки:

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

cd c:/user/your-working-environment

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

foundation new your-project

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

cd your-project

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

compass watch

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

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

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

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

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

1	<link rel="stylesheet" href="stylesheets/style.css" />

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

<!-- HEADER SECTION -->
<header>
  <div class="row">
	    <div class="small-12 medium-12 large-12 columns">
			<div class="logo">
				<h1>Foundation 5 Topbar / Offcanvas menu</h1>
			</div> <!-- END DIV.LOGO -->
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</header> <!-- END HEADER -->

<!-- MAIN SECTION -->
<section class="main-section">
	<!-- CONTENT SECTION -->
	<section class="full-width content-section">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<h2>Moving aside for the Offcanvas people!</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
			</div> <!-- END 12 COLUMNS -->
		</div> <!-- END ROW -->
	</section> <!-- END SECTION.CONTENT-SECTION -->

	<!-- SERVICES SECTION -->
	<section class="full-width services-section">
		<div class="row">
			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
			</div>

		</div> <!-- END ROW -->
	</section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

	<!-- CALL 2 ACTION -->
	<section class="full-width call-to-action">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<a href="#" class="button radius">Get in touch with us!</a>
			</div>
		</div>
	</section>
</section> <!-- END SECTION.MAIN-SECTION -->

<!-- FOOTER SECTION -->
<footer>
	<div class="row">
    	<div class="small-12 medium-4 large-4 columns">
		    <h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>
	</div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
	<div class="row">
	    <div class="small-12 columns">
			<p>&copy; 2014</p>
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->

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

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

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

<!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
	<div class="row">
		<div class="large-12 columns">
			
            <!-- TOP BAR INITIALIZATION -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1></h1>
					</li>
				</ul> <!-- END UL.TITLE-AREA -->

				<!-- TOP BAR MENU ELEMENTS -->
				<section class="top-bar-section">
					<ul class="left">
						<li class="active"><a href="index.html">Home</a></li>
						<li class="has-dropdown">
							<a href="blog.html">Blog</a>
							<ul class="dropdown">
								<li><a href="blog.html">Archive</a></li>
								<li><a href="post.html">Single</a></li>
							</ul>
						</li>
						<li class="has-dropdown">
							<a href="page.html">Page</a>
							<ul class="dropdown">
								<li><a href="page.html">Full-wdith</a></li>
								<li><a href="sidebar-left.html">Left Sidebar</a></li>
								<li><a href="sidebar-right.html">Right Sidebar</a></li>
							</ul>
						</li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li class="has-dropdown">
							<a href="#">Dropdown</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
								<li><a href="#">Second link in dropdown</a></li>
								<li><a href="#">Third link in dropdown</a></li>
							</ul>
						</li>
					</ul>
				</section> <!-- END SECTION.TOP-BAR-SECTION -->
			</nav> <!-- END NAV.TOP-BAR -->

		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->

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

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

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

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

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap">
    <div class="inner-wrap">

		<!-- OFF CANVAS MENU BAR -->
		<nav class="tab-bar hide-for-large-up">

			<section class="left-small">
				<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>

			<section class="right tab-bar-section">
				<h1 class="title">Menu</h1>
			</section>

		</nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->

		<!-- OFF CANVAS MENU -->
		<aside class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li><label>Navigation</label></li>
				<li><a href="index.html">Home</a></li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="blog.html">Blog</a>
					<ul class="off-canvas-list">
						<li><a href="blog.html">Archive</a></li>
						<li><a href="post.html">Single</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="page.html">Page</a>
					<ul class="off-canvas-list">
						<li><a href="page.html">Full-width</a></li>
						<li><a href="sidebar-left.html">Left Sidebar</a></li>
						<li><a href="sidebar-right.html">Right Sidebar</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li><a href="portfolio.html">Portfolio</a></li>
			</ul>
		</aside>

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

    <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

	</div>
</div> <!-- END OFF CANVAS -->

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

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

Настройка Sass

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

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

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

body {
    background-color: #f1f1f1;
}

.full-wdith {
	min-width: 100%;
}

header {
	background: url('../images/stary-bg.png') #074e68;
	min-height: 175px;
	h1 {
		color: #fff;
		padding-top: 50px;
	}
}

.navigation-section {
	background-color: #333;
	.top-bar {
		li {
			text-transform: uppercase;
		}
	}
}

.main-section {
	padding: 30px 0 25px 0;
}

footer {
	background-color: #074e68;
	padding: 50px 0 40px 0;
	h4, p {
		color: #fff;
	}
}

.copyright-section {
	background-color: #333;
	color: #fff;
	padding: 25px 0 0 0;
}

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

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

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

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

1	$topbar-height: 65px;
2	$topbar-link-font-size: rem-calc(15);

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

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

1	$tabbar-height: rem-calc(65);
2	$tabbar-hamburger-icon-top: rem-calc(16);

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

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

Заключение

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

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