Как создать меню для мобильных устройствВ сегодняшней статье речь пойдет об еще одном способе создания красивого меню для мобильной версии сайта. Данное решение позволит сделать упор на том, чтобы посетители Вашего сайта как можно скорее могли добраться до контента страницы, что очень и очень важно для мобильного сайта. Общее правило при разработке мобильных приложений гласит: контент всегда должен иметь приоритет перед навигацией. Мы имеем в виду, что пользователи мобильных устройств хотят как можно быстрее получить ту информацию, которую ищут.

 

Пользователям не нужна куча навигационных ссылок. Тем не менее многие сайты, даже адаптивные, твердо привязаны к правилу, что навигация должна находиться в верхней части страницы. И так, давайте приступим.

Шаг 1. HTML

Что же давайте попробуем создать страницу с мобильным меню. Ее мы будем создавать с нуля, в обычном HTML-редакторе. Необходимые пояснения будут даваться по ходу процесса. Начнем же мы с создания шаблона страницы HTML5.

Разметка простая, мы добавили навигационный блок, который организованный списком, а также добавляем изображения и подписи для навигации, все выглядит достаточно просто.

Как создать меню для мобильных устройств

Шаг 2. CSS

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

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

Шаг 3. JS

Теперь нам необходимо добавить функцию триггера при нажатии кпопки, чтобы сделать цикличную функцию, мы добавим такой параметр:

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

Вот и все. Готово!