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

23 октября 2015 Антон Кулешов 1764 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
Читайте далее

Протокол IMAP, или о том, как мы данные из писем вытаскивали

16 ноября 2015 Антон Кулешов

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

Табы для сайта на jQuery

21 октября 2014 Антон Кулешов

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

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

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