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

Поділитися
Вставка
  • Опубліковано 3 жов 2024

КОМЕНТАРІ • 44

  • @stasich6917
    @stasich6917 9 місяців тому +5

    фух мужик, ты меня спас, спасибо за урок

  • @nubik_o5886
    @nubik_o5886 Рік тому +2

    Спасибо за урок! Без воды, чётко по теме, лайк + подписка заслуженная

  • @ЕвгенияОдесса-у8и

    Огромное спасибо! Самое лучшее бургер-меню, уже применила

    • @HtmllabRu
      @HtmllabRu  Рік тому

      Рад, что вам пригодилось 😊

  • @TotSamyiAltynAdam_17
    @TotSamyiAltynAdam_17 Рік тому +1

    Spasibo bolshoe vam))) video bylo polezno

  • @artursveshnikov7668
    @artursveshnikov7668 2 роки тому +2

    Круто, у вас в кармане мой лайк и подписка. Смотрел до этого 2 варианта. Всё очень запутанно, куча ненужного текста: БЭМ, стилизация страницы в общем всё есть, а нужного нет. Ролики почти на час. А тут просто и лаконично и только то, что нужно. Давно я такого не встречал. Спасибо)

    • @HtmllabRu
      @HtmllabRu  2 роки тому +1

      Артур, спасибо!
      На базовом курсе по HTML, начинающий слушатель попросил рассказать о верстке бургера, нужно было сделать лаконично. Рад, что оценили

  • @ИринаГлыцко-у2я
    @ИринаГлыцко-у2я Рік тому +1

    Гениально! )))

  • @ДмитрийМагнат-ф2б
    @ДмитрийМагнат-ф2б 10 місяців тому

    Мужик, спасибо тебе большое. Очень выручил в реальном проэкте

    • @HtmllabRu
      @HtmllabRu  10 місяців тому

      Рад, что пригодилось👍

    • @ДмитрийМагнат-ф2б
      @ДмитрийМагнат-ф2б 10 місяців тому

      а можно сделать меню гамбургер с выпадпющим списком ? Это прям маст хед@@HtmllabRu

  • @ЕваМ-к9х
    @ЕваМ-к9х 3 роки тому +2

    Спасибо, отличное видео! Очень хочется теперь тоже опробовать!

  • @андрейандреев-к6о9ж

    Спасибо, все доступно объясняете, очень понравилось и узнал много нового!

  • @ДмитрийВолокитин-я8ф

    Спасибо. Отличное решение. Видео полезное и очень понравилось.

  • @АлексейКривчиков-ж1с

    Спасибо, всё четко по делу 👍

  • @dendy_miku
    @dendy_miku 2 роки тому

    Большое спасибо, получилось)

  • @qeez4434
    @qeez4434 Рік тому

    Спасибо большое за урок !

    • @HtmllabRu
      @HtmllabRu  Рік тому

      Рад, что было полезно)

  • @IgorBobyrev
    @IgorBobyrev 22 дні тому

    нормальных вопросов так никто и не задал. А нормальный вопрос только один: что если бургерное меню большое и находится не рядом с лейблом, инпутом и кнопкой?

  • @Rivixal
    @Rivixal Рік тому

    Очень круто сделано, можно спросить? Возможно ли сделать бургер не используя тег и ?

    • @HtmllabRu
      @HtmllabRu  Рік тому +2

      Да, ul и li можно заменить на блоки div с классами типа .menu и . item

    • @Rivixal
      @Rivixal Рік тому

      @@HtmllabRu Спасибо больше! Я подписался на ваш канал и поставил лайк и буду часто смотреть видео по этой тематике, у вас очень интересно и информативно :)

  • @masterofpuppets2382
    @masterofpuppets2382 2 роки тому +1

    Как закрыть автоматом бургер меню при выборе якоря по лендингу

  • @hi9mi
    @hi9mi 3 роки тому

    чекбоксу можно дать атрибут hidden и не прятать его через display: none

  • @Zeleban1
    @Zeleban1 3 роки тому

    Просто пару дней назад интересовался, нужно на сайт было) Как так получаться, что темы так совпадают с насушенными и актуальными задачами ?) (Задачу копипастом решил, но для увеличения кругозора видео посмотрел ) )

    • @HtmllabRu
      @HtmllabRu  3 роки тому +2

      Значит нас волнуют актуальные вопросы)

  • @wlad_anderson
    @wlad_anderson 2 роки тому

    Пишу все по видеодохожу до скрытия чекбоска, после когда прописываю @media screen ... пропадает меню ,но не появляется бургер. при записи кода именно в css файл. Если ще тот же самый код вставить в index.html , то все появляется и работает . css подключен ,все нормально работает остальное. Что не так делаю? Повторил на новой странице. все работает, возвращаюсь в свой код, только при подключении из index.html . Может кто подскажет где собака спряталась ?)

    • @HtmllabRu
      @HtmllabRu  2 роки тому

      В таком случае обычно проверяю на валидаторах HTML и CSS, а потом через отладчик Chrome смотрю какие CSS-свойства применены в текущий момент элементам.

  • @froz_cards
    @froz_cards Рік тому

    А что если мне надо, чтоб бургер меню открывалось при нажатии на картинку под которой ссылку, мне в тэг лэйбл вставить нужные теги? И как тогда будет выглядить код в css, нужно ли будет сплюсовать a и img?

    • @HtmllabRu
      @HtmllabRu  Рік тому

      Или по-другому верстать, например изображение с флажком поместить в label, а сам label не прятать (при этом CSS тоже придется менять - сейчас label прячется через display:none). Или вешать js

  • @ФОРТМАНИЯ
    @ФОРТМАНИЯ 2 роки тому

    Здравствуйте, подскажите, как можно убрать иконку бургера при прокрутке вниз, чтобы она не тянулась, если у нас меню в неактивном состоянии?

    • @HtmllabRu
      @HtmllabRu  2 роки тому

      Приветствую. Попробуйте убрать у [for=burger] свойство position:fixed

  • @АлёнаБударина-д2ж

    Большое спасибо за видео! Лайк! Только вопрос: почему он появляется только в момент перехода от десктопной версии к мобильной путем уменьшения экрана в инструменте разработчика? если выбрать модель смартфона (наверху из выпадающего списка) бургер не отображается...

    • @HtmllabRu
      @HtmllabRu  Рік тому

      Алёна, спасибо за коммент! Добавил в head нужные meta

      Теперь будет работать

    • @АлёнаБударина-д2ж
      @АлёнаБударина-д2ж Рік тому

      @@HtmllabRu meta были, не помогло

    • @HtmllabRu
      @HtmllabRu  Рік тому

      @@АлёнаБударина-д2ж у меня это показывается так dropmefiles.com/pUSF3, а у вас меню остается обычным списком? Или список пропадает и бургер не появляется?

    • @АлёнаБударина-д2ж
      @АлёнаБударина-д2ж Рік тому

      @@HtmllabRu при выборе смартфона он появляется на секунду и пропадает, меню не отображается. Не могу понять где ошибка, ведь все делала по видео... спасибо за ответы!))

    • @HtmllabRu
      @HtmllabRu  Рік тому

      @@АлёнаБударина-д2ж не за что) К сожалению, у меня не получилось воспроизвести такую проблему ¯\_(ツ)_/¯

  • @nickdegolden7796
    @nickdegolden7796 2 роки тому

    Добрый день, Алексей! :)
    А как этот маленький бургер увеличить? Он у меня не поддаётся, даже когда ставлю display=block

    • @HtmllabRu
      @HtmllabRu  2 роки тому +1

      Nick de Golden, приветствую! Увеличьте ему размер шрифта:
      @media screen and (max-width: 500px){
      [for=burger]::before {
      content: '☰';
      font-size: 2rem;
      }
      }

    • @nickdegolden7796
      @nickdegolden7796 2 роки тому

      @@HtmllabRu, хорошо, спасибо! :)
      А как сделать, чтобы бургер не перемещался при клике на него? А то у меня получается именно так... А при втором клике он возвращается на место )) А при следующем клике - опять в сторону...

    • @HtmllabRu
      @HtmllabRu  2 роки тому

      @@nickdegolden7796 пришлете код через jsbin.com/?

  • @Програмированиеснуля-л4в

    один вопрос как сделать символ бургер кнопки

    • @HtmllabRu
      @HtmllabRu  2 роки тому

      по ссылке в описании используется символ '☰'