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

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

Сложность

Существует множество способов для создания адаптивного меню, в том числе и при помощи jQuery. Но в данном уроке, мы создадим простое адаптивное меню на CSS3 @media (и небольшой вставкой jQuery) для корректного отображения меню на маленьких экранах смартфонов.

HTML Разметка

Для начала добавим тег meta viewport в разделе head. Данный тег необходим, для корректного масштабирования на экране любого размера, особенно на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Следующий код это сама навигация.

><nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Главная</a></li>
<li><a href="#">Уроки</a></li>
<li><a href="#">Иконки</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Инструменты</a></li>
</ul>
<a href="#" id="pull">Меню</a>
</nav>

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

Стили

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

body {
	background-color: #ece8e5;
}

Навигация nav, будет иметь ширину 100% окна браузера, список ul 600px.

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}

Разворачиваем меню по горизонтали.

nav li {
	display: inline;
	float: left;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Так как контейнер имеет ширину 600px, то каждая ссылка будет шириной 100px.

nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}

Ссылки адаптивного меню разделены рамкой справой стороны, шириной в 1px, кроме последнего пункта.

nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}

При наведении, пункты меню станут более светлыми.

nav a:hover, nav a:active {
	background-color: #8c99a4;
}

Дополнительная ссылка (иконка) будет скрыта (для больших экранов).

nav a#pull {
	display: none;
}

Теперь у нас есть готовое меню, но при изменении размера окна браузера, меню, адаптироваться не будет. Пора переходить к следующему этапу.

Адаптивное меню

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

Так как наша навигация изначально имеет ширину 600px, сначала определим стили для экранов шириной в 600px и меньше.

Разобьем меню на два столбца по три ряда ссылок, так как ширина списка ul равна 100% от ширины экрана, то ссылка будет шириной 50%.

@media screen and (max-width: 600px) {
	nav {
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

далее перейдем к размеру 480px и меньше.

На данном размере экрана отображаем внешнюю ссылку, добавляем к ней иконку "меню" при помощи псевдо-элемента :after и скроем основные пункты меню.

@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

При разрешении экрана в 320px, все пункты меню отображаем вертикально сверху вниз.

@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}

Выводим меню

Для того чтобы меню открывалось при нажатии на иконку, используем jQuery функцию slideToggle().

$(function() {
	var pull 		= $('#pull');
		menu 		= $('nav ul');
		menuHeight	= menu.height();

	$(pull).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
});

Перевод статьи How to Create a Responsive Navigation

Тэги: menu

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.