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

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

Выпадающее меню на HTML и CSS

28 января 2015 Антон Кулешов

Продолжаем развивать тему навигации сайта и рассмотрим сегодня плавающие выпадающее горизонтальное меню. Собственно, ничего нового, стандартный ненумерованный список, такой же, как мы использовали в одной из предыдущих статей (ссылка ниже), только усложняем его дополнительными вложенными списками для реализации выпадающих пунктов меню.

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Всплывающие окна alertify

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

Скучные JavaScript всплывающие окна – не самый лучший вариант информирования и общения с пользователем. В одной из прошлых статей я рассказывал, как легко и просто можно добавить «Сладкие Оповещения» на сайт, заменив стандартный вид alert-ов. Сегодня мы также рассмотрим хороший самодостаточный JavaScript код всплывающего окна под названием alertify. У него есть ряд преимуществ, которые делают его полезным инструментом в арсенале веб-разработчика.