Адаптивное меню для сайта

Адаптивное меню для сайта. Drogin.ru

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

Адаптивное меню решает многие технические моменты даже при сложном многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней 3-4 уровня. При том вся необходимая информация будет находится в пределах 2 кликов — никаких горизонтальных прокруток. Именно этот вариант повышает юзабилити в разы, обеспечив пользователю удобную навигацию.

Однако, как я уже говорил, у многих процесс создания мобильного меню связан с сложностями и продолжительной работой. Действительно, для создания качественного адаптивного меню следует приложить немало усилий. Но не стоит переживать, сегодня я расскажу как можно достаточно просто и быстро создать мобильное меню для своего сайта на готовом примере.

Для начала давайте посмотрим на пример адаптивного меню:
ПРИМЕР СКАЧАТЬ

 

Как создать адаптивное меню

Первым делом рассмотрим структуру HTML-файла, а в частности блок <head>:

Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на Iphone. Я уже писал о нём в статье про мета-запросы.

Строка 3 — подключаем стили, позволяющие сделать сброс параметров, установленных браузером по умолчанию. Для тех, кто не знал — да, каждый браузер устанавливает свои параметры стилей по умолчанию.

Строка 4 — подключаем файл с правилами для нашего меню.

Строка 5 — подключаем JS-файл, для корректной работы адаптивного меню.

Теперь рассмотрим структуру меню в <body>:

Думаю, здесь нечего прокомментировать, за исключением строки 23 — в ней мы прописываем элемент навигации для мобильного меню.

После того, как мы составили структуру, необходимо добавить до закрывающего тега </body> ещё 2 JS-файла:

Если jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.

 

Итого

После небольших изменений в коде «под себя» мы получаем отличное адаптивное меню, в котором содержится 2 типа навигации:

  • стандартная;
  • мобильная.

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

Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!

 

 


0
Подписаться на новости

Отправить ответ

1 Комментарий на "Адаптивное меню для сайта"

Уведомить о
Сортировка:   новые | старые | популярные
Гость

меню очень красивое, но никак не могу понять как сделать так чтоб мобильное меню появлялось не после (1024) а после 600px.

wpDiscuz