Иконка мобильного меню на чистом javascript (без jQuery)

В предыдущей статье я рассказывал о том, какую иконку-гамбургер для меню на мобильных устройствах я использую. Там я использовал jQuery для ее оживления, но сказал, что можно обойтись и без этой сторонней библиотеки.

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

Итак, разметка выглядит следующим образом. Кроме самой иконки я добавил еще и пример меню:

Думаю, ничего объяснять не нужно. Обращаю ваше внимание на атрибуты id у элементов. По ним мы будем работать с javascript.

Теперь стили:

Большинство стилей взяты с предыдущей статьи о нашей иконке для мобильного меню. Также были добавлены стили для показа самого меню.

Теперь сам javascript:

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

Да, кода побольше по сравнению с версией с jQuery. Но повторюсь: если вы будете подключать jQuery только ради работы этой иконки и мобильного меню — оно того не стоит, воспользуйтесь нативным javascript. Браузер спасибо скажет ;)

Результат на Codepen. Пользуйтесь, комментируйте!

Иконка мобильного меню на чистом javascript (без jQuery): Один комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *