Адаптивное меню незаменимо в любом современном сайте, который следует тенденциям и развивает свой продукт. К сожалению, многие видят процесс создания мобильного меню очень сложным и прибегают к помощи специалистов. Специально для вас я подготовил отличное адаптивное меню, которое легко установить на сайт.
Адаптивное меню решает многие технические моменты даже при сложной многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней 3-4 уровня. При том вся необходимая информация будет находится в пределах 2 кликов — никаких горизонтальных прокруток. Именно этот вариант повышает юзабилити в разы, обеспечив пользователю удобную навигацию.
Однако, как я уже говорил, у многих процесс создания мобильного меню связан с сложностями и продолжительной работой. Действительно, для создания качественного адаптивного меню следует приложить немало усилий. Но не стоит переживать, сегодня я расскажу как можно достаточно просто и быстро создать мобильное меню для своего сайта на готовом примере.
Для начала давайте посмотрим на пример адаптивного меню:
ПРИМЕР СКАЧАТЬ
Как создать адаптивное меню
Первым делом рассмотрим структуру HTML-файла, а в частности блок <head>:
|
1 2 3 4 5 6 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/modernizr.js"></script> </head> |
Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на Iphone. Я уже писал о нём в статье про мета-запросы.
Строка 3 — подключаем стили, позволяющие сделать сброс параметров, установленных браузером по умолчанию. Для тех, кто не знал — да, каждый браузер устанавливает свои параметры стилей по умолчанию.
Строка 4 — подключаем файл с правилами для нашего меню.
Строка 5 — подключаем JS-файл, для корректной работы адаптивного меню.
Теперь рассмотрим структуру меню в <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <header> <nav class="cd-main-nav-wrapper"> <ul class="cd-main-nav"> <li><a href="#ankor">О нас</a></li> <li><a href="#ankor">Каталог</a></li> <li><a href="#ankor">Портфолио</a></li> <li><a href="#ankor">Контакты</a></li> <li> <a href="#ankor" class="cd-subnav-trigger"><span>Список</span></a> <ul> <li class="go-back"><a href="#ankor">Меню</a></li> <li><a href="#ankor">Пункт №1</a></li> <li><a href="#ankor">Пункт №2</a></li> <li><a href="#ankor">Пункт №3</a></li> <li><a href="#ankor">Пункт №4</a></li> <li><a href="#ankor">Пункт №5</a></li> <li><a href="#ankor" class="placeholder">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#ankor" class="cd-nav-trigger">Menu<span></span></a> </header> </body> |
Думаю, здесь нечего прокомментировать, за исключением строки 23 — в ней мы прописываем элемент навигации для мобильного меню.
После того, как мы составили структуру, необходимо добавить до закрывающего тега </body> ещё 2 JS-файла:
|
1 2 3 4 5 6 7 |
<body> ... <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> </body> |
Если jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.
Вывод
После небольших изменений в коде «под себя» мы получаем отличное адаптивное меню, в котором содержится 2 типа навигации:
- стандартная;
- мобильная.
Адаптивное меню обеспечит удобство навигации по сайту и его непременно оценят посетители вашего ресурса. К тому же, это отличное дополнение в создании качественного адаптивного сайта, в котором все элементы должны быть на своих местах.
Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!
