Как построить сокращающуюся фиксированную верхнюю панель с помощью Foundation

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

В наши дни очень распространенной тенденцией является использование фиксированной навигации, которая сжимается, становясь менее навязчивой, поскольку пользователь прокручивает страницу вниз. В этом уроке я покажу вам, как вы можете добиться этого, используя верхнюю панель ZURBs Foundation, некоторые пользовательские sass и jQuery. В завершении, мы добавим несколько медиа-запросов, чтобы сделать наше меню отзывчивым. Давайте начнем!

Требования

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

Основное понимание Foundation Topbar
Базовое понимание Foundation и Grid системы
Знание работы с Sass и Compass
Небольшой опыт использования jQuery для обработки некоторых событий

Начинаем

Сначала мы создадим рабочую среду. Если вы не знаете, как это сделать, используя Compass и Sass, ознакомьтесь с разделом Начало работы (Getting Started) в разделе Build a Top Bar Off-Canvas Navigation With Foundation 5.

Создайте свой новый проект Foundation и используйте compass watch для компиляции вашего проекта. Мы создадим наш собственный style.scss в папке scss для наших настроек и некоторого общего стиля. С этой настройкой мы погрузимся в общую структуру HTML, поехали!

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

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

Запустив новый проект Foundation, перейдите в файл index.html и начните с удаления всего содержимого между тегами тела, за исключением скриптов непосредственно перед закрывающим тегом body. Then add the following line to your <head> чтобы импортировать наш style.css.

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

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

<!-- HEADER SECTION -->
 <div class="contain-to-grid header-section">
 
   <!-- TOPBAR SECTION -->
 	<nav class="top-bar important-class" data-topbar>
 
 	</nav> <!-- END TOPBAR SECTION -->
 </div> <!-- END HEADER SECTION
 
 <!-- CONTENT FILL WHEN SCROLL = 0 -->
 <div class="header-fill"></div>
 
 <!-- CONTENT SECTION -->
 <div class="row content-section">
 	<div class="main-content">
 		<div class="small-12 medium-12 large-12 columns">
 			<h1>Fancy Foundation Top Bar</h1>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
 			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
 		</div>
 	</div>
 </div> <!-- END CONTENT SECTION -->
 
 <!-- FOOTER SECTION -->
 <div class="footer-section">
 	<div class="row">
 		<div class="small-12 medium-12 large-12 columns">
 			<p>&copy; Copyright 2014</p>
 		</div>
 	</div>
 </div> <!-- END FOOTER SECTION -->

Здесь мы создали раздел заголовка, включая раздел <nav>, раздел содержимого и нижний колонтитул. Есть несколько вещей, которые нужно отметить:

Наш <nav> имеет класс .important-class, которые мы будем использовать, чтобы сообщить jQuery, какой элемент нужно настроить, когда мы собираемся прокручивать вниз.
Мы включили div с классом .header-fill. Мы будем использовать это, чтобы разместить некоторое пространство между верхней частью браузера и секцией содержимого, поскольку наш заголовок будет исправлен и имеет более высокий индекс z, а затем остальные элементы на странице.

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

Затем, мы собираемся написать HTML для нашей верхней панели. Нам нужна зона заголовка для нашего логотипа и раздел с <ul> для хранения наших пунктов меню. Взгляните на следующий HTML:

<!-- TOPBAR SECTION -->
 <nav class="top-bar important-class" data-topbar>
 		
     <!-- TITLE AREA & LOGO -->
 	<ul class="title-area">
 		<li class="name">
 			<img src="img/Acme_Colour.png" alt="" id="logo-image">
 		</li>
 		<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
 	</ul> <!-- END TITLE AREA & LOGO -->
 
     <!-- MENU ITEMS -->
 	<section class="top-bar-section">
 		<ul class="right">
 			<li class="active"><a href="index.php">Home</a></li>
 			<li><a href="blog.php">Blog</a></li>
 			<li><a href="#">About us</a></li>
 			<li><a href="#">Portfolio</a></li>
 			<li class="has-dropdown">
 				<a href="#">Services</a>
 				<ul class="dropdown">
 					<li><a href="#">Service #1</a></li>
 					<li><a href="#">Service #2</a></li>
 					<li><a href="#">Service #3</a></li>
 				</ul>
 			</li>
 			<li><a href="#">Contact</a></li>
 		</ul>
 	</section> <!-- END MENU ITEMS -->
 </nav> <!-- END TOPBAR SECTION -->

Мы добавили <ul> title-area класса, в которой мы сохраняем наш логотип. Затем у нас есть <section> класс класса top-bar и <ul> с классом .right, содержащий все наши элементы списка. Наш образ имеет идентификатор logo-image, который нам также понадобится в нашем jQuery позже в этом уроке.

Шаг 3: Теперешние результаты

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

Настройка Sass

Чтобы получить желаемые результаты, нам понадобится базовый стиль для наших разделов, особенно заголовок и раздел Top Bar. Мы собираемся использовать Sass , чтобы это получилось.

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

Для начала, мы собираемся дать всем нашим разделам некоторый базовый стиль. Взгляните на Sass ниже:

1	$primary-color: #ef4523;
2
3	/*
4	HEADER SECTION
5	========================================================================== */
6	.header-section {
7	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
8	box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
9	position: fixed;
10	z-index: 999;
11	min-width: 100%;
12	}
13
14	.contain-to-grid {
15	background-color: rgba(255, 255, 255, 0.97);
16	}
17
18	// FILL USED FOR HEADER
19	.header-fill {
20	background: #fff;
21	height: 135px;
22	.tablet-mobile-logo img {
23	padding-top: 30px;
24	}
25	}
26
27	// USED FOR JQUERY ACTION
28	.padding-on-my-header {
29	padding: 17px 0.9375rem 62px 0.9375rem;
30	ul.title-area img {
31	margin: -5px 0 0 0;
32	}
33	}
34
35	.full-width {
36	min-width: 100%;
37	}
38
39	p {
40	line-height: 3rem;
41	padding-bottom: 30px;
42	}
43
44
45	/*
46	CONTENT SECTION
47	========================================================================== */
48
49
50	.content-section {
51	.main-content {
52	margin-top: 35px;
53	}
54	}
55
56
57	/*
58	FOOTER SECTION
59	========================================================================== */
60
61	.footer-section {
62	background: #333;
63	min-height: 100px;
64	p {
65	color: #fff;
66	margin-top: 50px;
67	}
68	}

Здесь мы используем переменную основного цвета, которую мы собираемся использовать для некоторых стилей Top Bar. Наш заголовок имеет приятную тонкую тень, поэтому на самом деле выглядит так, будто он плавает над остальной частью контента. Установив свое положение на фиксированное и сделав z-index: 999, мы следим за тем, чтобы навигационная панель попадала в верхнюю часть браузера, когда мы прокручиваем вниз и он остается выше всех остальных элементов на странице.

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

Шаг 2: Стиль верхней панели

Теперь мы добавим стиль, чтобы придать нашей верхней панели приятный, гладкий вид. Вы также можете настроить некоторые параметры верхней панели в файле _settings.scss, но я покажу вам, как это сделать, используя наши собственные переопределения. Sass ниже объясняет, что и где происходит:

/*
    TOPBAR NAVGATION
    ========================================================================== */
 .top-bar
 {
     background: none;
 	padding: 45px 0.9375rem 90px 0.9375rem;
 	transition: all 0.5s ease 0.1s;
 	// LOGO ADJUSTMENT
 	ul.title-area img {
 		margin: -10px 0 0 0;
 	}
 	.top-bar-section ul {
 		background: none;
 		// MENU ITEM STYLES
 		li a:not(.button), li.active a:not(.button) {
 			background: none;
 			line-height: 30px;
 			font-size: 12px;
 			padding: 0;
 			margin: 5px 0 0 0;
 			text-transform: uppercase;
 		}
 		// MENU ITEM HOVERS
 		li a:not(.button):hover {
 			background: none;
 			border-bottom: 2px solid $primary-color;
 			color: #222;
 		}
 		// MENU ITEM ACTIVE
 		li.active a:not(.button) {
 			border-bottom: 2px solid $primary-color;
 			color: #222;
 			&:hover {
 				background: none;
 			}
 		}
 		li {
 			margin-left: 30px;
 			a {
 				color: #888;
 			}
 		}
 	}
 	// DROPDOWN MENU
 	.top-bar-section ul li:hover:not(.has-form) > a {
 		color: #333;
 	}
 	.top-bar-section li ul.dropdown {
 		background: #fff;
 		border: 1px solid #ddd;
 		color: #888;
 		li {
 			border-bottom: 1px solid #ddd;
 			margin: 0;
 			padding: 5px 15px 5px 15px;
 		}
 	}
 	.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) {
 		background: none;
 		color: #222;
 		border-bottom: none;
 		padding: 20px -4px 40px 45px;
 	}
 	.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
 		background: none;
 		color: #222;
 	}
 	// DROPDOWN ARROW
 	.has-dropdown > a:after {
 	    border-color: rgba(0, 0, 0, 0.5) transparent transparent;
 	    margin-top: -5px;
 	}
 }

Примечание: Мы собираемся переместить заголовок .padding-on-my-header класс ниже правил верхней панели. Это необходимо, чтобы отступы перекрывали верхнюю панель.

Мы добавили некоторые дополнения в нашу верхнюю панель, и установили переход 0,5 с, легкость 0.1s. Это обеспечит плавный эффект перехода, когда начнется наш jQuery. Фон установлен на none, так что наш заголовок имеет слегка прозрачный цвет, который мы предоставили нашему .contain-to-grid класс. Остальное - это некоторый базовый стиль для пунктов меню верхней панели, выпадающих меню, зависаний и активных состояний. Ничего не преувеличено, но оно дало нам чистый результат, добавив пропуски и пробелы.

Шаг 3: Теперешний результат

Давайте посмотрим, что у нас есть. Безусловно, начинает как-то выглядеть! Тем не менее, наше меню по-прежнему немного велико, когда мы прокручиваем страницу вниз. Вот где наш .padding-on-my-header шаги класса.

jQuery для эффекта

Давайте используем немного магии jQuery, чтобы добавить заголовок .padding-on-my-header класса на прокрутке и изменим логотип на меньший размер.

Шаг 1. Создание нашего init.js

Мы собираемся создать файл init.js для размещения нашего кода jQuery. Поместите его в папку / js и включите следующую строку внизу индексационного файла, перед тегом закрывающего тега, чтобы включить скрипт:

        <!-- JAVASCRIPTS -->
     	<script src="bower_components/jquery/dist/jquery.min.js"></script>
 		<script src="bower_components/foundation/js/foundation.min.js"></script>
 		<script src="js/app.js"></script>
         <!-- OUR JQUERY MAGIC -->
 		<script src="js/init.js"></script>
 	</body>
 </html>

Наш init.js будет содержать следующее:

jQuery(window).scroll(function() {
     if (scroll >= 50) {
         $('#logo-image').attr('src', 'img/Acme_Monogram_Colour.png')
         $(".important-class").addClass("padding-on-my-header");
     }
     if (scroll < 50) {
     	$(".important-class").removeClass("padding-on-my-header");
     	$('#logo-image').attr('src', 'img/Acme_Colour.png')
     }
 });

Давайте посмотрим, что на самом деле происходит здесь. Когда пользователь прокручивается вниз, мы выполняем следующую функцию: если пользователь прокручивает более 50 пикселей, мы делаем верхнюю панель меньшей и вставляем логотип меньшего размера:

Мы находим наш логотип и заменяем источник изображения нашим меньшим логотипом.
Затем мы ищем наш .important-class и добавляем к нему еще один класс: .padding-on-my-header

Когда мы вернемся назад и прокрутимся ниже 50 пикселей, мы сделаем обратное и удалим класс заполнения, вернув логотип большого ol'.

Шаг 2: Проверка результатов

Перейдите и вернитесь в браузер. Обновите страницу и попробуйте прокрутить вниз. Если все пойдет так, как планировалось, вы должны увидеть, как верхняя панель сокращается с плавным переходом, а большой логотип заменяется меньшим. Все идет очень хорошо. Но когда мы изменим размер нашего браузера, вы увидите, что он не совсем такой как нам нужно. Давайте позаботимся об этом!

Медиа-запросы для оптимизации мобильных устройств

Мы будем создавать медиа-запрос для устройств с разрешением 1024 пикселя и меньше. Чтобы это было правильно, нам нужно изменить небольшую точку остановки Foundation. Как вы говорите? Ну, это просто! Мы просто собираемся нырнуть в наш _settings.scss и искать следующую настройку:

1	// Media Query Ranges
2	$small-range: (0em, 64em);
3	$medium-range: (64em, 64em);
4	$large-range: (64.063em, 90em);
5	$xlarge-range: (90.063em, 120em);
6	$xxlarge-range: (120.063em, 99999999em);

Как вы можете видеть, мы переместили малый диапазон от 0em-40em до 0em-64em, который вычисляет до 1024px; Наш средний диапазон теперь начинается с 64em. Сохраните настройки, чтобы изменения вступили в силу, и давайте перейдем к нашему медиа-запросу!

Шаг 1. Добавление медиа-запросов

Наша верхняя панель на более мелком устройстве не должна быть такой большой. Мы немного уменьшим ее и изменим наше меню. Мы также будем использовать гораздо меньшую заливку заголовка. Давайте посмотрим, что мы здесь сделали:

@media only screen and (max-width: 1024px) {
 
     .top-bar {
 		margin-top: 0;
 		padding: 0;
 		float: none;
 		// MENU BUTTON AND HAMBURGER ICON
 		.toggle-topbar.menu-icon a {
 			color: #222;
 			&:after {
     			box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
     		}
 		}
 		// LOGO
 		ul.title-area img {
 			margin: -2px 0 0;
 			width: 145px;
 		}
 		.top-bar-section {
 			ul {
 				background: #333;
 				li {
 					margin-left: 0;
 				}
 				li > a {
 					background: $primary-color;
 					border-radius: 0;
 					font-size: 0.9rem;
 				}
 				// NORMAL BUTTONS
 				li:not(.has-form) a:not(.button) {
 					background: none;
 					color: #fff;
 					padding: 10px 15px;
 					margin-top: 0;
 					&:hover {
 						background: $primary-color;
 						color: #fff;
 						margin-top: 0;
 					}
 				}
 				// ACTIVE BUTTON
 				li.active:not(.has-form) a:not(.button) {
 					background: $primary-color;
 					color: #fff;
 					padding: 10px 15px;
 					margin-top: 0;
 					&:hover {
 						background: lighten($primary-color, 5%);
 						margin-top: 0;
 					}
 				}
 			}
 		}
 	}
 	// SMALLER IMAGE
 	.top-bar.padding-on-my-header ul.title-area img {
 		margin: 5px 13px 0;
 		width: 35px;
 	}
 	// EXPANDED TOPBAR MENU
 	.top-bar.expanded {
 		margin-top: 0;
 		padding: 0;
 		float: none;
 		.toggle-topbar.menu-icon a {
 			color: #fff;
 			&:after {
     			box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
     		}
 		}
 	}
 
 	// SMALLER HEADER
 	.header-fill {
 		height: 40px;
 	}
 
 }

Давайте посмотрим, что мы здесь сделали:

Мы удалили все дополнения и поля на верхней панели.
Мы указали текст меню, а значок гамбургера - серый цвет, вместо белого цвета по умолчанию, поэтому он отображается на нашем белом верхнем баре.
Мы установили наш логотип большего размера, чтобы поместиться в верхней панели.
В top-bar-section мы разрабатываем наши ответные пункты меню, гибкость и активные состояния.
Мы также изменяем размер и размещаем логотип меньшего размера.
Мы удалили некоторые дополнения и поля в нашем расширенном гибком меню.
Наконец, мы сделали наш .header-fill меньше, так что он равен высоте нашей верхней панели.

Шаг 2: Наслаждайтесь итоговыми результатами!

Когда мы вернемся к нашему браузеру и изменим его размер, мы можем теперь увидеть, что наша гибкая навигация в полном объеме. Прокрутите вниз и посмотрите, как изображение логотипа все еще меняется. Нажмите на значок меню, чтобы увидеть расширенную версию нашей гибкой навигации.

Заключение

С некоторыми масками Sass и jQuery нам удалось превратить мощную базовую верхнюю панель из ZURB's Foundation в потрясающий, модный притягательный заголовок с некоторыми плавными эффектами. Готовы к вашему пользованию или для ваших клиентских проектов. Счастливо!

Ресурсы