Ещё одно адаптивное меню

23 октября 2015 Антон Кулешов 1870 0

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

Реклама

Конечно, можно написать меню, соблюдая все нюансы его устройства и заботясь о пользователях не только стандартных ПК, но и персональных гаджетов со значительно меньшими экранами, но это может занять массу времени. В этой статье я хочу предложить хорошее решение адаптивного меню, которым сам частенько пользуюсь. Этот вариант из цикла: скачал, подключил, вставил – готово! Да и добавляй свои пункты меню или изменяй цвета и размеры элементов.

Вот несколько плюсов данного решения меню:

  • Адаптивность к различным расширениям экранов;
  • Приятный дизайн «из коробки» с элементами CSS3 анимации;
  • Предусмотрена ситуация, когда у пользователя отключён JavaScript.

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

Для начала подключим необходимые файлы для работы меню:

<link href="main.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="modernizr.js" type="text/javascript"></script>

В main.css – находятся reset стили и общие оформление. После этих файлов подключаем стили для самого меню и скрипт:

<link href="styleMenu.css" type="text/css" rel="stylesheet" />
<script src="scriptMenu.js" type="text/javascript"></script>

Теперь добавим необходимую разметку для работы меню:

<div id="header">
	<div class="nav">
		<ul class="nav-main">
			<li>
				<a href="#0">О сайте</a>
			</li>
			<li>
				<a href="#0">Правила</a>
			</li>
			<li>
				<a href="#0">Люди</a>
			</li>
			<li>
				<a href="#0">Контакты</a>
			</li>
			<li>
				<a href="#0" class="subnav-trigger">
					<span>Рубрики</span>
				</a>
				<ul>
					<li class="go-back">
						<a href="#0">Меню</a>
					</li>
					<li>
						<a href="#0">PHP скрипты</a>
					</li>
					<li>
						<a href="#0">Javascript</a>
					</li>
					<li>
						<a href="#0">Локальный сервер</a>
					</li>
					<li>
						<a href="#0">Визуальные редакторы</a>
					</li>
					<li>
						<a href="#0">Кнопки</a>
					</li>
					<li>
						<a href="#0" class="placeholder">Placeholder</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<a href="#0" class="cd-nav-trigger">Меню<span></span></a>
</div>
<div id="content">
	<!-- Контент сайта -->
</div>

Вот и всё! Наше адаптивное меню добавлено, останется только указать свои пункты. Чуть не забыл, для того, чтобы работал вариант, когда пользователь отключил JavaScript нужно элементу html добавить class=no-js.

Реклама
Комментариев еще не оставлено
no_avatar