Показать Меню
falbar Адаптивное меню

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

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

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

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

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

  • Адаптивность к различным расширениям экранов;
  • Приятный дизайн «из коробки» с элементами 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".

Источник
codyhouse.co

Подписаться на обновления

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