Тёмный

бургер меню css (без javascript) 

htmllab
Подписаться 11 тыс.
Просмотров 21 тыс.
50% 1

бургер меню - создаём заготовку на чистом html и css.
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: / @htmllabru
Код примера: codepen.io/htmllabru/pen/VwbNeeX

Опубликовано:

 

25 июл 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@stasich6917
@stasich6917 6 месяцев назад
фух мужик, ты меня спас, спасибо за урок
@nubik_o5886
@nubik_o5886 11 месяцев назад
Спасибо за урок! Без воды, чётко по теме, лайк + подписка заслуженная
@user-hw6td5sn7y
@user-hw6td5sn7y 2 года назад
Спасибо, отличное видео! Очень хочется теперь тоже опробовать!
@user-sg7dn9wz2r
@user-sg7dn9wz2r Год назад
Огромное спасибо! Самое лучшее бургер-меню, уже применила
@HtmllabRu
@HtmllabRu Год назад
Рад, что вам пригодилось 😊
@artursveshnikov7668
@artursveshnikov7668 2 года назад
Круто, у вас в кармане мой лайк и подписка. Смотрел до этого 2 варианта. Всё очень запутанно, куча ненужного текста: БЭМ, стилизация страницы в общем всё есть, а нужного нет. Ролики почти на час. А тут просто и лаконично и только то, что нужно. Давно я такого не встречал. Спасибо)
@HtmllabRu
@HtmllabRu 2 года назад
Артур, спасибо! На базовом курсе по HTML, начинающий слушатель попросил рассказать о верстке бургера, нужно было сделать лаконично. Рад, что оценили
@user-zw9mp2fd7d
@user-zw9mp2fd7d Год назад
Спасибо, все доступно объясняете, очень понравилось и узнал много нового!
@TotSamyiAltynAdam_17
@TotSamyiAltynAdam_17 Год назад
Spasibo bolshoe vam))) video bylo polezno
@user-wg6lw4uz8p
@user-wg6lw4uz8p 2 года назад
Спасибо. Отличное решение. Видео полезное и очень понравилось.
@user-jj1wm7kg1q
@user-jj1wm7kg1q Год назад
Спасибо, всё четко по делу 👍
@user-ji1go9kx3d
@user-ji1go9kx3d Год назад
Гениально! )))
@dendy_miku
@dendy_miku 2 года назад
Большое спасибо, получилось)
@qeez4434
@qeez4434 Год назад
Спасибо большое за урок !
@HtmllabRu
@HtmllabRu Год назад
Рад, что было полезно)
@user-xq8xi3lw5v
@user-xq8xi3lw5v 7 месяцев назад
Мужик, спасибо тебе большое. Очень выручил в реальном проэкте
@HtmllabRu
@HtmllabRu 7 месяцев назад
Рад, что пригодилось👍
@user-xq8xi3lw5v
@user-xq8xi3lw5v 7 месяцев назад
а можно сделать меню гамбургер с выпадпющим списком ? Это прям маст хед@@HtmllabRu
@Rivixal
@Rivixal Год назад
Очень круто сделано, можно спросить? Возможно ли сделать бургер не используя тег и ?
@HtmllabRu
@HtmllabRu Год назад
Да, ul и li можно заменить на блоки div с классами типа .menu и . item
@Rivixal
@Rivixal Год назад
@@HtmllabRu Спасибо больше! Я подписался на ваш канал и поставил лайк и буду часто смотреть видео по этой тематике, у вас очень интересно и информативно :)
@Zeleban1
@Zeleban1 2 года назад
Просто пару дней назад интересовался, нужно на сайт было) Как так получаться, что темы так совпадают с насушенными и актуальными задачами ?) (Задачу копипастом решил, но для увеличения кругозора видео посмотрел ) )
@HtmllabRu
@HtmllabRu 2 года назад
Значит нас волнуют актуальные вопросы)
@hi9mi
@hi9mi 2 года назад
чекбоксу можно дать атрибут hidden и не прятать его через display: none
@user-hj6jl7bc9l
@user-hj6jl7bc9l Год назад
Большое спасибо за видео! Лайк! Только вопрос: почему он появляется только в момент перехода от десктопной версии к мобильной путем уменьшения экрана в инструменте разработчика? если выбрать модель смартфона (наверху из выпадающего списка) бургер не отображается...
@HtmllabRu
@HtmllabRu Год назад
Алёна, спасибо за коммент! Добавил в head нужные meta Теперь будет работать
@user-hj6jl7bc9l
@user-hj6jl7bc9l Год назад
@@HtmllabRu meta были, не помогло
@HtmllabRu
@HtmllabRu Год назад
@@user-hj6jl7bc9l у меня это показывается так dropmefiles.com/pUSF3, а у вас меню остается обычным списком? Или список пропадает и бургер не появляется?
@user-hj6jl7bc9l
@user-hj6jl7bc9l Год назад
@@HtmllabRu при выборе смартфона он появляется на секунду и пропадает, меню не отображается. Не могу понять где ошибка, ведь все делала по видео... спасибо за ответы!))
@HtmllabRu
@HtmllabRu Год назад
@@user-hj6jl7bc9l не за что) К сожалению, у меня не получилось воспроизвести такую проблему ¯\_(ツ)_/¯
@nickdegolden7796
@nickdegolden7796 Год назад
Добрый день, Алексей! :) А как этот маленький бургер увеличить? Он у меня не поддаётся, даже когда ставлю display=block
@HtmllabRu
@HtmllabRu Год назад
Nick de Golden, приветствую! Увеличьте ему размер шрифта: @media screen and (max-width: 500px){ [for=burger]::before { content: '☰'; font-size: 2rem; } }
@nickdegolden7796
@nickdegolden7796 Год назад
@@HtmllabRu, хорошо, спасибо! :) А как сделать, чтобы бургер не перемещался при клике на него? А то у меня получается именно так... А при втором клике он возвращается на место )) А при следующем клике - опять в сторону...
@HtmllabRu
@HtmllabRu Год назад
@@nickdegolden7796 пришлете код через jsbin.com/?
@mrfroz_cards
@mrfroz_cards Год назад
А что если мне надо, чтоб бургер меню открывалось при нажатии на картинку под которой ссылку, мне в тэг лэйбл вставить нужные теги? И как тогда будет выглядить код в css, нужно ли будет сплюсовать a и img?
@HtmllabRu
@HtmllabRu Год назад
Или по-другому верстать, например изображение с флажком поместить в label, а сам label не прятать (при этом CSS тоже придется менять - сейчас label прячется через display:none). Или вешать js
@user-wr3rj4rk1i
@user-wr3rj4rk1i 2 года назад
Здравствуйте, подскажите, как можно убрать иконку бургера при прокрутке вниз, чтобы она не тянулась, если у нас меню в неактивном состоянии?
@HtmllabRu
@HtmllabRu 2 года назад
Приветствую. Попробуйте убрать у [for=burger] свойство position:fixed
@masterofpuppets2382
@masterofpuppets2382 2 года назад
Как закрыть автоматом бургер меню при выборе якоря по лендингу
@wlad_anderson
@wlad_anderson Год назад
Пишу все по видеодохожу до скрытия чекбоска, после когда прописываю @media screen ... пропадает меню ,но не появляется бургер. при записи кода именно в css файл. Если ще тот же самый код вставить в index.html , то все появляется и работает . css подключен ,все нормально работает остальное. Что не так делаю? Повторил на новой странице. все работает, возвращаюсь в свой код, только при подключении из index.html . Может кто подскажет где собака спряталась ?)
@HtmllabRu
@HtmllabRu Год назад
В таком случае обычно проверяю на валидаторах HTML и CSS, а потом через отладчик Chrome смотрю какие CSS-свойства применены в текущий момент элементам.
@user-vd6qw9xm3r
@user-vd6qw9xm3r 2 года назад
один вопрос как сделать символ бургер кнопки
@HtmllabRu
@HtmllabRu 2 года назад
по ссылке в описании используется символ '☰'
Далее
Бургер меню HTML + CSS + JS
23:53