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

 

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

Шаг 1. HTML

После того как вы подключили скрипты к своей странице данного меню, нам стоит создать разметку, навигация будет построена у нас с помощью SVG:

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

Шаг 2. CSS

Для начала мы устанавливаем параметры для правильного отображения контейнера в котором будет содержаться данное меню:

Далее устанавливаем заливку вокруг контейнера:

Заливка фона внутри контейнера у нас будет следующая:

Последним шагом станет добавление стилей для иконок навигации и их активного состояния с переходами:

Шаг 3. JS

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

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

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