Как сделать сворачивающееся адаптивное меню

Обновлено: 06.07.2024

Возвращаясь к теме всё возрастающей значимости мобильных устройств, невозможно обойти стороной меню сайта. По бо ́ льшей части для создания адаптивных меню используются решения на JavaScript, но всегда ли это оправдано? Пожалуй, нет. Ведь его можно сделать на чистом CSS, изменяя видимость элементов при помощи чекбокса.

Не будем долго разглагольствовать о плюсах и минусах данного подхода, а сразу обратимся к конкретному примеру. В данном случае это будет простое одноуровневное меню.

Что делать с многоуровневыми меню? Здесь есть несколько вариантов:

начать смотреть решения на JavaScript/jQuery
открывать второй уровень по наведению (что, надо сказать, не является хорошим решением)

Разметка будет чуть более многословной, чем нам это необходимо: здесь содержатся элементы, которые и вовсе могут не пригодиться. Однако, она довольно проста и разобраться в ней совсем несложно.

Дальше постепенно будем разбирать каждый кусочек css-кода по принципу mobile first.

Стили

На устройствах с экраном менее 640 пикселей пункты меню скрываются и остаётся только стилизованный через label чекбокс. Если чекбокс отмечен, меню становится видимым. Код для реализации:

С мобильными устройствами разобрались. Осталось внести изменения для тех устройств, экран которых >= 640px. Делать это будем через медиа-запросы.

Стилизация метки

Разумеется, вместо data-open/close можно использовать что угодно. Например, добавить иконочный шрифт.

Или иконку с вместе с поясняющим текстом:

Здесь мы получаем значение атрибутов data-open/close , отображаем данные через before , а саму иконку добавляем с помощью псевдоэлемента after .

В последних двух примерах читателю нужно будет самостоятельно поиграть с позиционированием иконок и расположением самого текста.

Каких-то невероятных эффектов от подобной реализации меню ждать не приходится, хотя не сто ́ ит забывать о возможностях CSS-анимации.

Как сделать адаптивное меню для сайта на чистом html и css, не подключая jquery и javascript. Не поверите, но очень легко. Предположим, вам необходим простой сайт-визитка с простым одноуровневым меню из 4-5 пунктов, но в то же время сайт должен быть адаптированным к мобильным устройствам.

Сегодня мы создадим адаптивное меню для такого сайта-визитки за 10 минут. Сделаем мы это на на чистом html и css, используя чекбокс и видимость элементов.

То есть смысл такой, на большом дисплее видно обычное горизонтальное меню. Но если ширина дисплея менее 640 px, горизонтальное меню становится невидимым и к работе приступает наш чекбокс.

Он разворачивает и сворачивает мобильную версию меню.

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

и вторая часть кода:

В файле HTML после тега должно быть указано:

без этого код работать не будет.

Можете проверить только что созданное адаптивное меню для своего сайта. Как проще всего проверить? Можно прямо в браузере. Настройки — масштаб и увеличьте до 300-400 %. Именно так и будет выглядеть ваша веб-страничка на мобильном устройстве.

Можете скачать и использовать уже готовый файл HTML с адаптивным меню для сайта

Читайте так-же как просто сделать калькулятор с ползунком на сайте на примере калькулятора натяжных потолков

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

Так смотрится с широкого монитора;

Здесь автоматически происходит переход на мобильную панель;

Остается нажать на кнопку и вызвать с боку вертикальную панель;

Приступаем к установке:

* <
box-sizing: border-box;
transition: 0.4s ease all;
>

const navbar = document.querySelector(".gorizontal_menyu");
navbar.querySelector(".tumbler").addEventListener("click", () => <
navbar.classList.toggle("dvizheniye");
>);
window.addEventListener("scroll", (e) => <
let windowY = window.pageYOffset;
let navbarHeight = document.querySelector(".gorizontal_menyu").offsetHeight;
if (windowY > navbarHeight) navbar.classList.add("sticky");
else navbar.classList.remove("sticky");
>);

Адаптивность меню не имеет внешние зависимости, а это означает, что вам нужно подключить JS, чтобы все идеально работало на небольших экранах.

Где полностью отвечает за функции, что будут изменятся при наличие размера, а точнее автоматически подстраиваться по своему дизайну.

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

До сворачивания я дошел, а вот что делать дальше - уже второй день не могу придумать. Есть идеи?

Понятно, что это было бы гораздо проще реализовать через column-count:

Дольше добавить нужным li нужные классы, и прописать их в media на скрытие, и уже ближе к решению вроде - ведь с общим родителем ul работать очевидней. Проблема в том, что column-count делает все столбцы одной ширины. У меня есть и достаточно длинные, и очень короткие. Так что он совсем не катит.

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

Bootstrap и адаптивное меню. При уменьшении меню распадается на несколько строк
меню до уменьшения выглядит так после уменьшения так используется Bootstrap.

Адаптивное меню. Глюк в виде выделения пунктов меню
Описание проблемы.. Есть меню. При "собранном" состоянии, когда несколько раз нажать кнопку.

Адаптивное меню
Здравствуйте. Делаю сайт с адаптивным дизайном. Нужно сделать что бы обычные кнопки.

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

ua30, Увы но делать все за вас мне не хотелось, за наведение курсора отвечает css который не составит труда поменять. Если вам охото все в 1 строчку не занимайтесь версткой(программированием)

boilzzz, спасибо еще раз. Ну завтра с утра на свежую голову посмотрю этот код, может он не так страшен.

Делать все за меня не надо. Хотелось бы просто подсказку, в каком направлении рыть.

boilzzz, jq подключен по умолчанию. На чистом JavaScript будет просто 4-5 строк вместо одного инлайна.

Код приложить не получится, делал все прям в рабочем проекте, а не в примере. У кого будут конкретные вопросы - обращайтесь, обязательно подскажу.

Если детальней, делаем обертку с position: relative; вложенные слои block_first, block_second, block_third по @media устанавливаются display: none; position: absolute; , а так же смещения по сетке. Ну и при скрытии первого блока все через тот же @media не отходя от кассы показываем изначально скрытую "кнопку". А уже на ней висит jq обработчик, который показывает туда-сюда все скрытое. Как-то так.

Читайте также: