В добавку к прошлой записи, еще один небольшой пример с простой адаптивной менюшкой. Будем использовать CSS Media Query + jQuery. Демо с кодом, как всегда на Codepen, в продолжений поста более подробное, пошаговое описание.
- Создадим обычный Unordered List и для начала разместим в нем два div-контейнера. Первый для значка меню (три горизонтальные полоски, возьмем для этого символ Unicode – ☰). Иконка будет видна только на маленьких экранах.
Во второй контейнер поместим все элементы/ссылки меню. У меня получился такой HTML-код:
- Теперь займемся CSS. Для больших экранов скроем иконку меню (display:none в классе icon) и оставим только список с ссылками. В Media Query для класса icon, соответственно, пропишем display:block, для отображения иконки на маленьком экране.
- JS-часть будет отвечать за раскрытие списка меню при клике на иконку в уменьшенной/мобильной версий сайта. Для отображения/скрытия списка меню, мы будем использовать две функций addClass() и removeClass(), которые будут добавлять/удалять класс showitems в зависимости от значения селектора-псевдокласса is(‘:visible’).
Код:
Опубликовано
Подробнее