Создаем адаптивное навигационное меню

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

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

 

Цель урока

Включайте демонстрацию и изменяйте размер окна браузера, чтобы увидеть концепцию в действии.

 

Разметка HTML

Первым делом нужно построить разметку. Так как мы создаем навигационный элемент, то отличным решением будет использование элемента HTML5 nav.

Даже такой небольшой кусочек кода может стать причиной головоной боли при тестировании. Особенно, если забыть, что HTML5 не поддерживается в IE  в версиях старше 9.  Для решения возникшей задачи совместимости используется скрипт html5shiv.

	<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

Добавляем список

Добавим простой неупорядоченный список с восемью ссылками. Демонстрация урока очень чувствительна к количеству пунктов меню, а именно, все настройки сделаны для восьми пунктов.

		<nav>
			<ul>
				<li><a href="#">RUSELLER</a></li>
				<li><a href="#">О нас</a></li>
				<li><a href="#">Клиенты</a></li>
				<li><a href="#">Работы</a></li>
				<li><a href="#">Аудио</a></li>
				<li><a href="#">Скачать</a></li>
				<li><a href="#">Блог</a></li>
				<li><a href="#">Контакт</a></li>
			</ul>
		</nav>

Добавляем подписи

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

		<nav>
			<ul>
				<li><a href="#">RUSELLER<br /> <small>Главная</small></a></li>
				<li><a href="#">О нас<br /> <small>Наша команда</small></a></li>
				<li><a href="#">Клиенты<br /> <small>Наши друзья</small></a></li>
				<li><a href="#">Работы<br /> <small>Наш труд</small></a></li>
				<li><a href="#">Аудио<br /> <small>Услыште нас</small></a></li>
				<li><a href="#">Скачать<br /> <small>Полезное</small></a></li>
				<li><a href="#">Блог<br /> <small>Прочитайте о нас</small></a></li>
				<li><a href="#">Контакт<br /> <small>Напишите нам</small></a></li>
			</ul>
		</nav>

Вот так будет выглядеть наше меню после проделанных операций:

 

Начинаем определять стили

Код CSS начнем с использования универсального селектора для сброса полей и отступов, а также назначим свойство box-sizing: border-box всем элементам страницы. Такой шаг поможет нам просто устанавливать размеры элементов  в процентах, даже при использовании рамок.

* {
	padding: 0;
	margin: 0;
 
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

 

Стили контейнера

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

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

nav {
	width: 90%;
	margin: 50px auto;	
}
 
nav ul {
	list-style: none;
	overflow: hidden;
}

 

Стили меню

Теперь приступим к определению стилей пунктов меню.

nav li a {
	display: block;
	float: left;
	width: 12.5%;
	padding: 10px;
 
	background: #444;
	border-right: 1px solid #fff;
 
	color: #fff;	
	font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

/*МЕЛКИЙ ТЕКСТ*/
nav small {
	color: #aaa;	
	font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
	text-transform: none;
 
}

Сначала определяем форму  для каждого пункта списка. Все ссылки делаем блочными элементами, смещаем их влево, задаем ширину и небольшой отступ. Получаем достаточно большой прямоугольник  Ширина 12.5% получается как результат вычислений 100% / 8 (количество пунктов меню).

Затем определяем внешний вид. Устанавливаем фон и рамку.

Завершает все задание стилей для текста меню. Используется шрифт PT Serif, который можно найти на сайте Google Web Fonts.

Для подписей устанавливаем цвет, удаляем трансформацию в верхний регистр и используем шрифт Helvetica.

 

Изменения при наведении курсора мыши на пункт меню

При наведении курсора мыши на пункт меню, то становится более черным. Для создания дополнительного эффекта используется трансформация.

nav li a {
	background: #444;
	border-right: 1px solid #fff;
	color: #fff;
	display: block;
	float: left;
	font: 700 13px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 12.5%;
	
	/*ТРАНСФОРМАЦИИ*/
	-webkit-transition: background 0.5s ease;
	   -moz-transition: background 0.5s ease;
	     -o-transition: background 0.5s ease;
	    -ms-transition: background 0.5s ease;
	        transition: background 0.5s ease;
}

/*АКТИВНОЕ СОСТОЯНИЕ*/
nav li a:hover {
	background: #222;
}

 

Исправляем рамку

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

/*РАМКА ПОСЛЕДНЕГО ПУНКТА*/
nav li:last-child a {
	border: none;
}

На рисунке ниже представлено меню на специальном сером фоне, где видно разницу между вариантами.

 

Делаем меню адаптивным

Данный проект является хорошим примером между резиновым и адаптивным дизайнами. Наше меню пока имеет резиновый дизайн (ширина определена в процентах), но не адаптивный. Если начать уменьшать ширину экрана, то меню превратиться в ужасную конструкцию:

Для исправления ситуации воспользуемся медиа запросами.  Самый лучший способ нахождения точки приложения медиа запроса - провести тестирование.

1220px

Первые проблемы появляются при ширине около значения 1200 px. Длинный текст некоторых пунктов начинает ломаться, так как ему не хватает ширины.

Для исправления ситуации нужно изменить только размер шрифта:

@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
	nav li a {
		font: 700 10px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
	}
	
	nav small {
		font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
	}
}

930px

Следующая точка, проявляющаяся при уменьшении размеров экрана - 930px. Здесь меню ломается сильнее.

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

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
	nav li a {
		width: 25%;
		border-bottom: 1px solid #fff;
		font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
	}
	
	nav li:last-child a, nav li:nth-child(4) a {
		border-right: none;
	}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
		border-bottom: none;
	}
}

580px и 320px

Двухстрочный формат работает отлично до значений ширины экрана меньше 600px, а затем также коверкается.

Здесь мы перестраиваем дизайн меню в две колонки с четырьмя строками.  А для размеров экрана меньше 320px нужно также уменьшить размер шрифта.

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
	nav li a {
		width: 50%;
		font: 700 12px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
	nav li:nth-child(even) a {
		border-right: none;
	}
	
	nav li:nth-child(5) a, nav li:nth-child(6) a {
		border-bottom: 1px solid #fff;
	}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	nav li a {
		font: 700 11px/1.4 'PT Serif', Helvetica, Verdana, Arial, sans-serif;
	}
}

Теперь наше меню будет адаптироваться под размер экрана.

 

Заключение

Построение адаптированного дизайна достаточно трудоемкий процесс. Много времни уходит на тщательное тестирование и подбор значений.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/FIctN9a1SYk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Создаем адаптивное навигационное меню | | 2012-06-19 11:59:21 | | Статьи Web-мастеру | | Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем ее стиль смещения влево и формируем внешний вид. Но адаптивный дизайн, который набирает популярность, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: