Как настроить Foundation 4 Top Bar

() translation by (you can also view the original English article)

Zurb's Foundation 4 имеет блестящую верхнюю панель, которая стала почти символом построения сайта Foundation. Сегодня мы рассмотрим, как вы можете реализовать его по-другому, разместив его в другом месте на странице, предоставив вам настраиваемое и адаптивное горизонтальное меню навигации.

Начиная

Для начала нам понадобится последняя версия фонда. Разархивируйте и поместите все файлы в вашу рабочую или тестовую директорию. Мы будем использовать только index.html, создав собственный стиль style.css, в котором мы переопределим различные классы верхней панели, чтобы сделать нашу собственную навигацию.

Также загрузите фоновое изображение, представленное выше. Мы будем использовать это для меню, поэтому поместите его в папку «img». Есть все? Тогда запустите ваш любимый редактор и начнем!

Настройка структуры HTML

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

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

Вы можете очистить остальную часть пустышки. Мы собираемся сделать дизайн полной ширины, ничего сложного, просто чтобы лучше понять, с чем мы работаем.

Хорошо, давайте настроим верхний колонтитул, навигацию, область контента и нижнего колонтитула и добавим некоторый фиктивный контент для наполнения. Мы дадим каждой области класс "полной ширины", затем в каждой области мы разместим div с class = "row", div с class = "large-12" и class = "columns". Это устанавливает базовую структуру сетки.

Примечание: для получения дополнительной информации о том, как работает сетка, взгляните на Foundation for Beginners: Grid System


<!-- HEADER AREA -->
<header class="full-width header-area">
  <div class="row">
		<div class="large-12 columns">
			<h2>Foundation-4 Custom Top Bar</h2>
		</div>
	</div>
</header> 

<!-- NAVIGATION AREA -->
<div class="full-width navigation-area">
	<div class="row">
		<div class="large-12 columns">
							
			<nav class="top-bar"></nav>
		</div>
	</div>
</div>

<!-- CONTENT AREA -->
<div class="full-width content-area">
	<div class="row">
		<div class="large-12 columns">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p>
		</div>
	</div>
</div>

<!-- FOOTER AREA -->
<div class="full-width footer-area">
	<div class="row">
		<div class="large-12 columns">
			&copy; 2013
		</div>
	</div>
</div>

Шаг 2: Разметка верхней панели

Перед тем, как приступить к стилизации, мы выложим необходимую HTML-структуру, чтобы заставить работать верхнюю панель Foundation. Нам нужно пять основных элементов, чтобы запустить двигатель:

nav с class = "top-bar"
ul с class = "title-area"
li c class = "toggle-topbar" = развернуть меню в мобильном макете
раздел с классом = "top-bar-section"
ul с class="left" и ul с class="right"

Теперь давайте настроим эти основы и реализуем пять элементов.

Примечание: В этом учебном примере мы хотим создать собственное меню навигации, удалив в нем заголовок (который обычно содержит логотип в текстовой или графической форме). Чтобы сделать это, мы просто оставляем li с class = "name" в ul с class = "title-area" пустым.

Кроме того, давайте добавим некоторые элементы меню и выпадающее меню, пока мы на нем. Чтобы включить раскрывающийся список, добавьте класс «has-dropdown» к элементу li, в котором вы хотите разместить раскрывающийся список, а затем введите новый ul с классом «dropdown». Чтобы указать текущую активную страницу, мы можем присвоить нашему текущему пункту меню класс «active» для элемента li. Мы можем оставить ul class = "right" пустым. Обычно вы используете эту область, чтобы добавить кнопку или форму ввода для поиска. Для получения дополнительной информации об особенностях разметки верхней панели, взгляните на Foundation for Beginners: The Top Bar.

Посмотрите на следующий HTML, комментарии объясняют, как он создается.


<!-- Nav Wrap --> 
<nav class="top-bar">
	<ul class="title-area">
	<!-- Title Area -->
		<li class="name"></li>
		<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
	</ul>

	<!-- The Section wrap -->
	<section class="top-bar-section">
	
		<!-- Left Nav Section -->
		<ul class="left">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Our products</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Prices</a></li>
			<li class="has-dropdown">
				<a href="#">Features</a>
				<ul class="dropdown">
					<li><a href="#">Modalboxes</a></li>
					<li><a href="#">Submenu's and navigation</a></li>
					<li><a href="#">Price tables</a></li>
					<li><a href="#">Buttons</a></li>
					<li><a href="#">Button groups</a></li>
					<li><a href="#">Labels, Keystrokes and Tooltips</a></li>
					<li><a href="#">Alert boxes</a></li>
					<li><a href="#">Columns</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>

		<!-- Right Nav Section -->
		<ul class="right"></ul>

	</section>
</nav>

Шаг 3: Результаты пока что

Посмотрите на результаты в вашем браузере. Теперь мы настроили базовую основу Foundation, используя Top Bar для создания горизонтального меню. Чтобы разместить его где-то кроме верхней части браузера, просто поместите nav class = "top-bar" в строку и столбцы div.

Когда вы измените размер браузера, вы увидите, что меню изменяется в предопределенной точке останова.

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

Настройка CSS

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

Если вы этого еще не сделали, создайте новый файл CSS, назовите его style.css и поместите его в папку css вашей загрузки для Foundation. Не забудьте включить его в тег заголовка вашего индексного файла, ссылаясь на него под фундаментом .css следующим образом:


<head>
    <meta charset="utf-8">
 	<meta name="viewport" content="width=device-width">
 	<title>Foundation 4</title>

 	<link rel="stylesheet" href="css/foundation.css">
 	<link rel="stylesheet" href="css/style.css">
 
 	<script src="js/vendor/custom.modernizr.js"></script>
</head>

Если вы не поместите его в файл foundation.css, он не заменит классы Top Bar.

Хорошо, давайте сначала разберемся со стилем заголовка, навигации, содержимого и области нижнего колонтитула. Для области навигации мы будем использовать фоновое изображение, которое вы предварительно загрузили. Общий дизайн не так уж и сложен, взгляните на CSS ниже. Мы добавляем класс полной ширины в каждую область, чтобы убедиться, что он заполняет всю ширину браузера.


body {
	background-color: #ccc;
}

/** Set the backgrounds for the different sections **/
.header-area {
    background-color: #2d465c;
    min-height: 160px;
}

.navigation-area {
	background-image: url('../img/navigation-container.jpg');
	background-repeat: repeat-x;
}

.content-area {
	padding: 50px 0 70px 0;
}

.footer-area {
    background-color: #1f1f1f;	
    color: #fff;
	min-height: 50px;
	padding: 20px 0 0 0;
}

.full-width {
	min-width:100%;
	position: relative;
}

h2 {
	color: #fff;
	font-weight: normal;
	margin-top: 50px;
}

Шаг 2: стили верхней панели

Если вы посмотрите на результаты сейчас, меню все еще выглядит немного неуместным. Это потому, что он все еще использует CSS по умолчанию. Давайте исправим это!

Есть пара CSS-классов, к которым мы должны обратиться, чтобы получить желаемые результаты. Сначала мы удалим часть черного фона в классе .top-bar и списках разделов и изменим высоту и высоту строки на 58px (высота области навигации). Проверьте комментарии для дальнейшего объяснения.


/** Changes background color, height and margin of the border **/
.top-bar {
    background: none;
    height: 58px;
    line-height: 58px;
    margin-bottom: 0;
}

/** Removes black background on menu bar **/
.top-bar-section ul {
    background: none;
    text-transform: uppercase;
}

/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
    background: none;
    line-height: 58px;
    padding: 0 27px;
}

Мы удалили черный фон по умолчанию из nav class = "top-bar", списков разделов и привязок меню. Мы корректируем высоту, высоту строки и отступы и преобразуем текст в верхний регистр, чтобы все это соответствовало нашему индивидуальному дизайну.

Если вы обновите свой браузер, вы увидите, что он начинает обретать форму. Давайте продолжим с выпадающими меню, пунктами меню, активным и парящим состояниями. Посмотрите на CSS ниже и снова прочитайте закомментированный текст для объяснения:


/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
    background:  rgb(0, 0, 0);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
    color: #fff;
}

/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
    color: #2d2d2d;
}

/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}

/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
    background: #333;
    color: #fff;
}

/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
    border-color: rgba(0, 0, 0, 1) transparent transparent;
    margin-top: 2.5px;
}

Мы внесли несколько изменений в наше меню здесь. Во-первых, мы изменили черный фон по умолчанию активного элемента меню на CSS-градиент. Затем мы дали неактивным пунктам меню состояние, напоминающее зависание. Чтобы сделать неактивные пункты меню более четкими, мы изменили цвет текста на темно-серый. Изменения, внесенные в .top-bar-section li: hover a будет держать состояние раскрывающегося меню на наведенной, когда ваша мышь перемещается над выпадающими элементами. Для завершения CSS мы дали выпадающему контейнеру ul фоновую заливку и изменили положение по умолчанию для стрелки раскрывающегося списка из-за наших корректировок отступа для верхней панели.

Шаг 3: Результаты пока что

Обновите ваш браузер и посмотрите на результаты. Мы еще не совсем закончили; нам все еще нужно убедиться, что все это выглядит хорошо, когда мы изменяем размер экрана нашего браузера (или, если на то пошло, когда мы смотрим на это на меньшем устройстве). Чтобы это произошло, мы добавим несколько медиазапросов в наш CSS-файл.

Настройка медиазапросов

Шаг 1: Медиа-запросы

Есть несколько вещей, которые нам нужно настроить, чтобы меню работало с нашим индивидуальным дизайном при уменьшении размера экрана. В основном это включает в себя добавление отступов, высоты строки, цветов текста и цветов фона. Посмотрите на CSS ниже и посмотрите на комментарии, чтобы получить объяснение для каждого раздела.


@media only screen and (max-width: 942px) {

    /* Makes the responsive menu fit in the navigation container and change its background to black */
    .top-bar ul {
        background-color: rgba(0, 0, 0, 0.5);
        padding-bottom: 13px;
    }

    /* Change non active menu item color to black */
    .top-bar-section ul li > a {
        color: #fff;
    }

    /* Gives the dropdown ul a black fill */
    .top-bar-section ul {
        background: #000;
    }

    /* Give the BACK button after going in a submenu the appropriate filling */
    .top-bar-section .dropdown li.title h5 a {
        line-height: 57px;
    }

    /* This fixes the position and the color of the dropdown arrow */
    .top-bar-section .has-dropdown > a:after {
        border-color: rgba(255, 255, 255, 1) transparent transparent;
        margin-top: 2.5px;
    }

} /* end media query */

Шаг 2: наслаждайтесь результатами

Сохраните файл, обновите ваш браузер и поиграйтесь с размером браузера. Как видите, меню прекрасно вписывается в наш дизайн.

foundation-4-custom-top-bar-final-product-responsive

Заключение

Итак, мы завершим наше руководство о том, как мы можем создать настраиваемое адаптивное меню, используя верхнюю панель из платформы Foundation 4. И помните, меню не должно быть в верхней части страницы. Просто оберните его в свою строку и столбцы div, и вы сможете разместить его практически где угодно!

Foundation - отличный инструмент для быстрой разработки адаптивных дизайнов, и когда вы знаете, как это сделать, вы можете в значительной степени изменить его по своему усмотрению. Повеселись!