Как сделать мобильное меню на сайте на css
Обновлено: 04.07.2024
Как сделать меню для сайта на чистом CSS?
Доброго времени суток, друзья. Частой задачей при разработки сайта или приложения является создание меню с целью лучшей навигации. Есть несколько путей решения этой задачи: либо с помощью CSS, либо с использованием JS. В данной статье я хочу показать вам путь решения этой задачи по средствам только одного CSS. Приступим.
Создание HTML макета
Для начала нам потребуется создать саму верстку по средам HTML тегов. Давайте же сделаем это.
Добавление основных CSS стилей
Добавление стилей для мобильной версии
Это все что нужно для для создания меню на чистом CSS. Давайте поподробнее рассмотрим как это все работает. У нас есть обычный список в котором мы храним меню. Мы добавляем checkbox с помощью которого мы будем хранить состояния и тег который будет у нас в роли кнопки меню на мобильных устройствах.
Скрываем сам checkbox и оставляем смену состояния только тегу .
Теперь добавляем стили которые будут показывать блок меню если мы кликае по тегу и скрывать его по второму клику.
Данная статья подошла к концу. Тут я оставил для вас исходник на GitHub. Сегодня мы рассмотрели пример того как на нативном CSS c использование checkbox можно создать полноценно адаптивное меню для мобильных устройств. C вами был Corvax. Да новых встреч!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя CSS.
Как сделать меню иконку
Если вы не используете библиотеку иконок, вы можете создать иконку основного меню с помощью CSS:
Меню иконка (бургер):
Анимированная иконка (кликните на ней):
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
Объяснение примера
Свойства width и height определяют ширину и высоту каждой полосы.
Мы добавили черный фон с помощью background-color , верхний и нижний отступы с помощью margin , которые используются для создания некоторого расстояния между каждой полосой.
Анимированная иконка
Используйте CSS и JavaScript, чтобы изменить иконку меню на иконку "отменить / удалить" при нажатии на неё:
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.container <
display: inline-block;
cursor: pointer;
>
Шаг 3) Добавить JavaScript:
Пример
Объяснение примера
HTML & CSS: Мы используем те же стили, что и раньше, только на этот раз мы оборачиваем элемент контейнера вокруг каждого элемента
Элемент контейнера используется для отображения символа указателя, когда пользователь наводит указатель мыши на блоки div (полосы). Когда на нем кликают, он выполняет функцию JavaScript, которая добавляет к нему новое имя класса, что изменяет стили каждой горизонтальной полосы: первая и последняя полоса трансформируются и поворачиваются, преобразуясь в букву "x". Полоса посередине исчезает и становится невидимой.
Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.
Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.
Первое что понадобится - добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню - это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
В нужное вам место на сайте добавьте html следующий код:
Давайте я подробно распишу что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID - menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом -menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом - menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру - делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Для начала, давайте добавим сами CSS стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
Далее задаем стили для нашего меню, то бишь ul списку.
left: -100%; - в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
Теперь скрываем стандартный чекбокс в виде галочки
Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы - left: 0;. Если хотите справа, то просто смените на right: 0;.
Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
Если вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Всем привет! В этот статье будет рассмотрено создание мобильного меню с использованием CSS3 и Javascript (без использования jQuery).
Наша задача – создать красивое меню для мобильных устройств, которое будет плавно открываться и закрываться без тормозов. Как правило, у адаптивных сайтов делают кнопку, по нажатию которой меню либо раскрывается, либо выезжает сбоку. Мы будем реализовывать именно второй вариант. Комментарии в коде будут на английском, т.к. проект лежит в репозитории на github.
Шаг 1. Создаем HTML разметку
На данном этапе нам нужно создать два контейнера – один для меню (cool-menu) и второй для всего содержимого страницы (page-wrapper). В содержимом страницы добавим какой-нибудь заголовок и текст, а также кнопку для активации/деактивации меню:
Порядок расположения этих контейнеров неважен, но логичнее что меню находится выше, чем основное содержание страницы.
Шаг 2. Добавляем CSS стили
Теперь нужно задать расположение всех элементов нашей страницы, а также добавить css классы для анимации. Я задал ширину меню 240px, поскольку, на мой взгляд, такая ширина оптимальна для просмотра на устройствах с небольшим экраном. Вы можете легко адаптировать этот код под свои нужды:
Добавьте этот код на страницу. Меню видно не будет, так как для него задано свойство display: none .
На этом шаге некоторые подумали, что теперь можно подключить jQuery и использовать анимацию для того, чтобы двигать меню туда/сюда. Но это будет глючно работать на мобильных устройствах, потому что браузер будет тратить время на пересчёт позиций элементов страницы. К тому же ни к чему подключать библиотеку jQuery, если можно обойтись чистым Javascript: экономия трафика, что немаловажно на мобильных устройствах.
Вместо jQuery анимации будем использовать css свойство translate3d. Благодаря этому, браузер не будет пересчитывать позиции элементов, этой операцией займется видеокарта (GPU). GPU создана для такой работы, поэтому анимация будет происходить быстрее и плавнее, чем при простом переносе элемента.
Чтобы контролировать положение нашего меню, нужно добавить немного кода на Javascript.
Шаг 3. Добавляем логику на Javascript
У разрабатываемого меню может быть 4 положения:
Мы будем добавлять определенный класс к элементу body, в зависимости от того, в каком положении находится меню:
Что делает этот код?
На следующем шаге добавим эти css классы, чтобы реализовать анимацию.
Шаг 4. Добавляем анимацию
Добавим в конец нашего файла со стилями несколько новых правил, которые используют css свойство transition3d:
Вы можете легко отредактировать эти стили для того, чтобы изменить время анимации или ширину, на которую нужно отодвигать меню. Осталось только добавить правило для показа меню на мобильных устройствах (не обязательно):
Создание мобильного меню – это просто!
На этом наше меню готово! Меню выглядит вот так:
Демо можно посмотреть здесь, весь код доступен на github. Создание мобильного меню не так сложно, как казалось ранее. Если остались вопросы, задавайте их в комментариях!
Читайте также: