Полноэкранное мобильное меню

Решение выполнено с использованием библиотеки jQuery

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

Пример:

Для более наглядного примера, я добавил мобильник и изменил прокрутку. В CSS и JS коде этого нет.

Оригинальный вид страницы с меню можно посмотреть по ссылке

HTML:

Т.к. иконка-гамбургер и само меню имеют фиксированное позиционирование, HTML-код можно разместить на странице в любом удобном месте.

CSS:

JS:

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Максим:

    Здравствуйте!

    Подскажите, куда вставлять код JS ?!

    В function.php — выдает ошибку.

    Ответить
    • Alexander:

      А зачем вы его в function.php вставляете?
      Там PHP коды от темы (если я правильно понял, что речь идет о WordPress).
      JS можно вставить в любой файл —.js этой же темы (ниже библиотеки jQuery) или отдельным файлом или например в подвал темы в теге script

      Ответить