Важнейшей частью любого сайта является меню. Это наиболее информативная и значимая часть страницы, которая позволяет пользователю сразу оценить: сможет ли он найти на сайте необходимый ему контент. Этот элемент интерфейса обязательно должен быть адаптивным для различных расширений экранов устройств.
Конечно, можно написать меню, соблюдая все нюансы его устройства и заботясь о пользователях не только стандартных ПК, но и персональных гаджетов со значительно меньшими экранами, но это может занять массу времени. В этой статье я хочу предложить хорошее решение адаптивного горизонтального меню, которым сам частенько пользуюсь. Этот вариант из цикла: скачал, подключил, вставил – готово! Да и добавляй свои пункты меню или изменяй цвета и размеры элементов.
Вот несколько плюсов данного решения меню:
- Адаптивность к различным расширениям экранов;
- Приятный дизайн «из коробки» с элементами 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.