Адаптивное меню на CSS без JS
HTML-код
- Опубликовано: 24 мар 2022
- В этом видео вы найдете вариант создания адаптивного меню с использованием возможностей HTML и CSS. При реализации меню, в том числе и гамбургера, не будет использован JS, только чистый CSS.
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
Однозначно лайк!
Вы молодец. Всегда спокойно, понятно, доступно.
Далеко не всем дан дар преподавания, у Вас он есть.
Спасибо)
Ваш видео-ролик помог студентам 1-го курса! Благодарим за помощь👍
Уже неплохо 😉
Огромное спасибо. Смог сделать это меню сколько нервов ушло.. Получилось. Правда использовал JS при клике на бургер добавляется динамический класс (например active-menu__burger) и у нас открывается меню)Спасибо еще раз!
Супер! 👍
Пожалуйста ;)
Спасибо, очень чисто и просто
Пожалуйста ;)
Спасибо тебе большое
Здравствуйте, выглядит интересно, было бы здорово, еслиб в описинии к видео вы прилагали купию кода, спасибо за видео)
Здравствуйте! Ок, в следующих уроках исправлюсь)
спасибо большое
Интересная задумка сделать меню через checkbox. Очень круто! По поводу минимльного разрешения экранов к сожалению было все хорошо пока самсунг не выпустил модель galaxy fold у которого ширина экрана 280px и теперь приходится подгонять контент под это разрешение. Так что ниже 320px к сожалению экраны еще есть
Ну, думаю, количество таких разрешений резко стремится к нулю, поэтому своеобразным стандартом уже давно стала минимальная ширина в 320px. В любом случае, всегда можно уменьшить это значение ;)
Привет , круто. А как можно сделать, чтобы при открытии меню-гамбургер, весь контент опускался на высоту меню? У меня получилось, что это меню накладывается на баннер.
Привет! Убирать абсолютное позиционирование. Но с точки зрения юзабилити - это так себе идея, когда контент будет ездить туда-сюда.
Только вот проблема. Если развернул меню, потом расширил экран, и заново сузил, то меню открытым остаётся.. Надо как-то снимать галочку при скрытии бургера
В реальности никто не занимается такими экспериментами с меню. Имею в виду, никто не изменяет размеры экрана. Ну а на мобильных устройствах это и вовсе невозможно.
Привет, сделал такой же бургер, но чуть модифицировал его, заняло 5 минут на 2x скорости. Спасибо
Пожалуйста)
При нажатии на копку меню в адаптивной версии - ничего не происходит, вроде все так же сделал, где ошибка?
Очевидно, где-то в коде) внимательнее пересмотрите урок, чтобы ее найти.
у меня есть несколько вопросов
у меня не работает overflow: hidden
норм
Спасибо большое очень интересно правда столкнулась с трудностью не понимаю как описать подпункты в @media вроде и класс отдельный присвоила думала через него, но не работает
Возможно, правило не срабатывает из-за низкого приоритета, т.е. его переопределяет правило с более высоким приоритетом. В этом случае нужно просто повысить приоритет правила. В консоли этот момент можно проверить.
понятно бургер закрывается открывается. но это какой то недоделанный бургер. А вот как сделать чтобы при нажатии на линки для перехода в другой отдел на той же странице меню закрывалось бы?
Доделать его)
@@matroskin978 это можно без js?
@@user-ei8ib3mq2q вряд ли.
@@matroskin978 спасибо!просто прохожу курс обучения верстки и везде всплывает бургер меню и аккардеон,вот думаю когда его стоит изучить сейчас или позже когда пройду основы html и css???
@@user-ei8ib3mq2q лучше позже. Бургер - это уже сложнее основ, поэтому вначале лучше все же изучить основы.
:hover плохо работает на мобильных устройствах. Можно убрать все :hover
@media (max-width: 767px) {
a:hover, li:hover {
pointer-events: none;
}
}
Ховер никак не работает на мобильных по сути. Разве что стать на ссылку и не убирать палец. Можно убрать. А можно и не убирать - не используется, но и не мешает. Поэтому не особо вижу смысл в подобных правилах. Зачем отключать то, что итак не используется?
В то же время бывают любители смотреть на десктопе браузер с минимальной шириной (возможно, удивитесь, но есть и такие). Зачем им отключать ховер? Итак люди страдают))
Здравствуйте, выглядит интересно, но у меня не получается розвирнуть бургер,можно консультацию, спасибо за видео)
Здравствуйте!
Если что-то не работает, значит, что-то сделали не так)
Поэтому внимательнее пересмотрите видео и сделайте правильно))
К сожалению, исходного кода не сохранилось, поэтому с ним помочь не смогу. Но Вы можете найти на канале аналогичный урок с меню, бургером и с исходным кодом впридачу.
@@matroskin978 делаю все правильно,могу код скинуть.Если вам нету возможности или желания помочь,попробую найти на канале
на канале нету такого как сейчас урок
@@sergeykuzmich9202 ну дубля, конечно же, нет. Но есть такой, например - ruclips.net/video/mPlQWAEW1qc/видео.html
@@sergeykuzmich9202 если делаете также, тогда должно работать... так подсказывает логика. Выложите архив с кодом - я посмотрю.
У меня вместо бургера белый прямоугольник...В чем проблема??
Проблема в коде. Где-то есть ошибка, которую нужно найти и исправить. Для поиска ошибки в браузере есть консоль разработчика, в которой, скорее всего, будет информация об ошибке.
привет, я закрепил шапку с гамбургером
теперь у меня шапка при пролистывании страницы зафиксирована наверху, чтобы в любой момент можно было использовать бургер
завернул всё в хеадер, и
header {
position: sticky;
height: 250px;
top: 0;
}
так же завернул все параграфы в див(ну или что угодно) и:
.paragraph {
margin-top: -175px;
}
я недавно начал изучать html/css, недели 2 где то, не судите строго :D
закрепить-то шапку закрепил, а ощущение что метод грязный, не уверен можно ли такое практиковать
если есть какой нибудь другой способ, подскажите пожалуйста(без js и тд тп офк)
Привет! Другого способа нет. Только через позиционирование (fixed либо sticky). Поэтому все правильно, ничего "грязного" в этом способе нет)
@@matroskin978 спасибо большое!
сообщения удаляете?
Зачем мне это, если в сообщении нет ничего криминального? Если там была ссылка, то скорее всего, такой комментарий удаляет RUclips. Во вкладке О канале найдите мой email и напишите на него.
Увидел в уведомлениях Ваш комментарий со ссылкой на GitHub. В списке комментариев его нет, а это значит, что RUclips не понравилась ссылка и он все же удалил комментарий.
Как и говорил, в коде у Вас все же есть ошибки. Целых три. Поэтому и не зря я рекомендовал Вам еще раз внимательнее пересмотреть урок. Куда полезнее самостоятельно искать и исправлять ошибки вместо того, чтобы кто-то сделал это за Вас. Говорят, на своих ошибках человек учится лучше.
1. В медиа-запросе для .menu Вы использовали height: 0; Как же это меню будет показываться, если у него нулевая высота?)) Вместо height: 0; нужен left: 0; (мы ведь позиционируем меню).
2. И пара ошибок для правил трансформации псевдоэлементов. У Вас правила записаны так:
#checkbox_toggle:checked~.hamburger.hamburger-line::before
#checkbox_toggle:checked~.hamburger.hamburger-line::after
А правильно так:
#checkbox_toggle:checked~.hamburger .hamburger-line::before
#checkbox_toggle:checked~.hamburger .hamburger-line::after
Найдете 2 отличия?)) В Вашем случае ищется элемент сразу с двумя классами .hamburger.hamburger-line. А правильно искать элемент с классом .hamburger-line внутри родителя с классом .hamburger.
Исправленный код доступен по ссылке - github.com/matroskin978/menu-kuzmich
Спасибо большое за информацию и помощь,Я согласен что нужно самому искать ошибки,Я не люблю чтобы за меня делали. Консультацию получать это хорошо
@@sergeykuzmich9202 пожалуйста ;)
Простите пожалуйста, но это пзд. Вот вы просто про среди видео меняете расширение экрана и таки "ага да". Что "да", я вот смотрю ничего не изменилось, что вы там поняли, просто хотя бы объяснить, показать куда смотреть. Я просто не понимаю, к чем действия некоторые в медиазапросе.
Если бы вы уточнили конкретную временную метку, а не просто сказали "про среди видео", тогда бы, возможно, я прокомментировал и уточнил, что именно я увидел или имел в виду.
Ну а так "ага, да" может вполне относится и к моим собственным мыслям. Например, у меня получился не тот результат, на который рассчитывал. Я ведь не машина, которая способна одновременно выполнять миллионы операций в секунду. Я человек. И мне сложно одновременно выполнять даже три операции одновременно: писать код, комментировать и думать, что именно сказать и написать в следующую секунду. Поэтому уж и вы меня простите, пожалуйста.