CSS фича #4 ➤ Кнопка меню гамбургер | Burger menu button CSS

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии • 265

  • @sergeyromanyuk5753
    @sergeyromanyuk5753 6 лет назад +115

    Вроде и мелочь этот бургерочечек и есть готовые решения, но.. капец как круто когда теперь сам сможешь делать эти кнопочки, потому что понимаешь что за чем и как.
    Хорошая работа, Артём)

    • @ThisDaveAndThatJohn
      @ThisDaveAndThatJohn 6 лет назад +2

      нужно всегда писать велосипеды чтобы научиться мыслить так как мыслил тот кто уже написал готовое решение.

  • @ArtyomKopylov
    @ArtyomKopylov 6 лет назад +72

    Как идея, было бы удобно вначале увидеть превью того что получилось а потом рассказ как сделать. Было бы очень удобно!

  • @FamilyB-u4s
    @FamilyB-u4s 4 года назад +1

    Сижу смотрю и думаю "Афигеть какой я опытный" и тут бах линии гораздо удобнее через трансформацию двигать относительно средней а не через позицию. Который раз удостовериваюсь что нужно любые видео смотреть и даже для новичков)). И кстате такие элементы со сменой состояния лучше на чекбокс вешать что бы js не тянуть. И такой нюанс еще, ненужно псевдоэлиментами злоупотреблять(1. Хоть и мало но замедляют скорость загрузки. 2. В случае чего сложно повесить обработчик).

  • @kanyshaiosmonova7968
    @kanyshaiosmonova7968 2 года назад

    Да, эта рубрика очень нравится. Удачи Вам!

  • @ganster6853
    @ganster6853 6 лет назад +26

    Круто!!!
    Артём сделай адаптивное меню

  • @ПавелВасильев-я5ц
    @ПавелВасильев-я5ц 5 лет назад +2

    Артем, а можно ли отдельно сделать тему к примеру "Основные функции css". В гугле конечно полно этой информации, но с твои уст это реально круто и запоминающееся выглядит. Примеры огонь. Вот например было неплохо, если бы ты показал @media примеров с пояснениями несколько. Спасибо за качественный контент

  • @dmitriymovchan6563
    @dmitriymovchan6563 6 лет назад +62

    Хочу увидеть продолжение с меню.

    • @Alex-jf5vc
      @Alex-jf5vc 6 лет назад

      продолжение с меню уже есть на канале

    • @ganster6853
      @ganster6853 6 лет назад

      Оно уже старое

    • @Kontrbandist
      @Kontrbandist 6 лет назад

      Поддерживаю!

  • @one-zero-dev
    @one-zero-dev 6 лет назад

    Артем, анимация отличная! Мой лойс уже отлетел ))) Серия уроков очень нравится! Жду продолжения )

  • @andriikuzmichov4022
    @andriikuzmichov4022 6 лет назад

    Эти видео как хороший сериал, новую серию выпустили, пересмотрел, но тебе мало, давайте сразу сезонами выпускать)))

  • @vzrosly_muzik
    @vzrosly_muzik 4 года назад +1

    Ты просто офигенно объясняешь! Однозначно подписка и буду смотреть другие видео!!

  • @АндрейЦарик-ч7ж
    @АндрейЦарик-ч7ж 6 лет назад +1

    Спасибо Артем! Интересно было бы увидеть как из этой кнопки еще и меню сделать. А также, меня интересует, как быстро и красиво оформить выпадающий список. И какие трюки с его анимацией можно применить.

    • @Glo_Academy
      @Glo_Academy  6 лет назад

      Меню сделаем

    • @AllinOne-zc7nd
      @AllinOne-zc7nd 6 лет назад

      Без меню фиксированого никак))

  • @Dikolman
    @Dikolman 6 лет назад

    Отличная идея продолжить это меню! И про то что Артём говорил чтобы раскрывалось на полный экран!!!

    • @Dikolman
      @Dikolman 6 лет назад

      На 13:18 минуте

  • @СергейКондулуков-з9ч

    Артём просто здорово :-) Хочу видеть продолжение урока.

  • @AndruhaLiveChannel
    @AndruhaLiveChannel 6 лет назад +4

    Самые лучшие и понятные уроки, продолжай!!!!

  • @ЮрійЛукасевич
    @ЮрійЛукасевич 6 лет назад

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

  • @lionlavrov1310
    @lionlavrov1310 4 года назад

    Ты так шикарно рассказываешь, все очень понятно и просто. Спасибо за годный урок!

  • @MrSergey11
    @MrSergey11 6 лет назад

    Отличное видео! Интересует еще и стилизация стандартного меню (прижать влево, добавить лого, добавить анимацию).

  • @fiery_soul5073
    @fiery_soul5073 6 лет назад

    Да, продолжение с меню будет крутым. Покажи как можно больше вариантов его появления!

  • @serg9836
    @serg9836 6 лет назад

    Фичи просто по КД выпускаеш) Походу коменты и лайки реально хорошая мотивация. Уже по стандарту лойс👍

  • @bunnybugs6623
    @bunnybugs6623 Год назад

    Чётко, как заправка для фантазии! Все понятно интерестно пошёл чаечеу запаривать)))

  • @petiashkas
    @petiashkas 3 года назад

    Артем, низкий вам поклон и большое человеческое спасибо!

  • @satieviliyaz7799
    @satieviliyaz7799 5 лет назад +1

    Братан, ты крут! Долго не мог понять этот бургег меню, спасибо за ролик большое! Выручил сильно.

  • @Донило-т4ы
    @Донило-т4ы 6 лет назад

    А есть разница, как делать кнопку, тегом или ?

  • @user-alada-kedaura
    @user-alada-kedaura 6 лет назад

    Толковые и нужные CSS-фичи. Продолжай в том же духе(ждем продолжение с меню).

  • @yuriimelnychuk7510
    @yuriimelnychuk7510 6 лет назад

    Блин, очень круто, а ведь кода немного, чувак ты богоподобен! Продолжай)

  • @TheNcoding
    @TheNcoding 6 лет назад +1

    Хорошие уроки. Наглядно и понятно. Респект за такой хороший контент. Насчёт меню классная идея. Предлагаю реализовать lite версию mmenu, без лишнего мусора и функционала. На днях тоже задумывался о реализации своего универсального меню. Видосик посмотрел вдохновился идеей.

  • @sigmaswarm
    @sigmaswarm 6 лет назад +2

    Я человек простой. Вижу css фичи ставлю лайк))

  • @ITheHaskI
    @ITheHaskI 6 лет назад

    От твоих видосов одно вдохновение приходит! Продолжай в том же духе

  • @АндрейЗападный-ш7с

    очень круто делаешь,я в восторге,на данный момент я только учусь и на уровне "0" в js нахожусь,спасибо тебе огромное за урок))

  • @sergeimersedes
    @sergeimersedes 6 лет назад

    Однозначно, тема очень интересна. Ждем продолжения.

  • @АзизКаимов-б5я
    @АзизКаимов-б5я 3 года назад

    Подскажите пожалуйста какой редактор кода использован в этом видео

  • @AllinOne-zc7nd
    @AllinOne-zc7nd 6 лет назад +3

    Многие люди смотрят видео, и не знают как применить это всё на деле конкретно в сайте... Можно было бы, показать маленькими видео, тоесть, постепенное создание сайта(адаптивного с медиа запросами) на бутстрап + ваши фичи(бургер меню , фул скрин с текстом, флекс и так далее) + js + jquery, было бы очень здорово и наглядно. Сам потратил на это пол года, и уверен что ещё рости и рости по этому направлению. П. С. Ответьте пожалуйста, как вам такая идея(ответом будет лайк или дизлайк)? Вопрос не только к Лысому))) 😊 😄

  • @arhwoodcnc7221
    @arhwoodcnc7221 6 лет назад +16

    спасибо боьлшое Артём)))
    сделай плавную прокрутку для якорей по лендингу)))

    • @МихаилКолоколуша
      @МихаилКолоколуша 6 лет назад +2

      Испрльзуя, jQuery это можно уместить в 3 строки. Мне кажется что урок из этого не выйдет..

    • @d_donskoy862
      @d_donskoy862 6 лет назад +4

      Діма Куліковський если на чистом js сделает, то очень полезно будет

    • @andyvi3116
      @andyvi3116 6 лет назад +4

      у меня уже есть готовый скрипт на чистом js - github.com/BlackFxTalon/scroll-to-link

    • @MrInkognitod
      @MrInkognitod 4 года назад

      в css можно добавить "html {
      scroll-behavior: smooth; }"

    • @ЕвгенийРусских-г8е
      @ЕвгенийРусских-г8е 4 года назад

      @@MrInkognitod safari же не поддерживает, а значит все яблочники в пролёте.

  • @АдаМахачева-у3ш
    @АдаМахачева-у3ш 2 года назад +1

    Сейчас это всё так же работает как 4 года назад? Я щас пытаюсь повторить и анимация не работает ни в какую

  • @zeretteompany3094
    @zeretteompany3094 6 лет назад

    Обожаю эту рубрику.
    Только сегодня научился делать 3д карточку, как уже новый урок.
    Может быть, если мне будет не влом, могу придумать что-нибудь интересное и скинуть код куда нибудь тебе, чтобы ты его сам разобрал, и может быть сделал на него урок. Устроит такое? Или ты только личные наработки показываешь?

    • @Glo_Academy
      @Glo_Academy  6 лет назад

      Скидывай сюда в комментарии

    • @zeretteompany3094
      @zeretteompany3094 6 лет назад

      Glo Academy добро.
      Осталось придумать и реализовать.

  • @ТарасБабіч-р8я
    @ТарасБабіч-р8я 4 года назад

    А какую ты используешь библиотеку jquery?

  • @Timyr123msp
    @Timyr123msp 5 лет назад

    Подскажите пожалуйста, почему вы используете тег , не тег

    • @Glo_Academy
      @Glo_Academy  5 лет назад

      Просто для примера. Использовать можно и то и то, в зависимости от смысла элемента

    • @Timyr123msp
      @Timyr123msp 5 лет назад

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

  • @Kontrbandist
    @Kontrbandist 6 лет назад

    Спасибо Артем наконецто понял как зделать самому бургер мену, очень хорошо обяснаяеш. Спасибо!!

  • @ДмитрийБудко-о5р
    @ДмитрийБудко-о5р 6 лет назад

    Артём а почему ты не делаешь видео про фрейворки ? На них можно ускорить разработку сайтов в 2-3 раза. AngularJS, Angular6, Vue.

  • @maximsmirnov887
    @maximsmirnov887 6 лет назад

    Спасибо за видео. Почему Вы не использовали такой стиль "top: calc(50% - 1px);"?

  • @СергейФомин-ъ5ж
    @СергейФомин-ъ5ж 4 года назад

    Круто. И спасибо за исходник.

  • @sergeyromanyuk5753
    @sergeyromanyuk5753 6 лет назад

    #активностьравнавидосу.
    Лайки, комменты - все эти перелести делайте, поддержим нашего "Лысого бро")

  • @ДенисОстровський-б3н

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

    • @СергейМиронов-з3ы
      @СергейМиронов-з3ы 5 лет назад +6

      Самое время через 6 месяцев:
      document.querySelector('.menu-btn').addEventListener('click', (evt) => {
      evt.preventDefault();
      this.classList.toggle('menu-btn_active');
      });

  • @СергейКузнецов-ц6ы
    @СергейКузнецов-ц6ы 6 лет назад +1

    Артем, очень хотелось бы увидеть выезжающее меню!!!

  • @fierysoul3751
    @fierysoul3751 6 лет назад

    мне надо чтобы стрелка была вправо. Что надо менять, и на какие значения???????

  • @AGM140580
    @AGM140580 3 года назад

    Молодец! Всё понятно объяснил.

  • @КтоТо-х6ь6ь
    @КтоТо-х6ь6ь 6 лет назад

    Хороший плейлист, новое виде = сразу лайк не глядя

  • @ОразалыИнкарбек
    @ОразалыИнкарбек 6 лет назад

    Я ваше не понемаю этих оси x ,y,z . По логике икс эта горизонталь, y вертикаль а z эта вроде глубина да ? В 3д трансформации css всё как-то перевернутый чтол

  • @mlpalphapony491
    @mlpalphapony491 6 лет назад

    Отличные штучки, продолжайте в том же духе!

  • @sonterix
    @sonterix 6 лет назад

    Такой вопрос: В первом варианте (с крестиком) - крестик складывается с права, так сказать. (это можно заметить в видео 10:26) А как сделать так, чтоб крестик складывался с цента? Спасибо за ответ

  • @qarangy
    @qarangy Год назад

    03:47 здесь по моему должен быть margin-bottom? или я ошибся?

  • @marchenko86
    @marchenko86 3 года назад

    что за шрифт у кода? скобки прикольные полукруглые такие...

  • @artempalamarchuk9440
    @artempalamarchuk9440 5 лет назад

    А как использовать сокращенные записи? Пишем a.menu-btn, получаем -->> ??

  • @leosantoro9995
    @leosantoro9995 6 лет назад

    Побольше бы плюшек с работой чисто на CSS))

  • @ВадимБарабанов-д6я

    Настолько хорошие уроки ,что я даже не поленился написать комментарий :3

  • @skynet2795
    @skynet2795 4 года назад

    Круто! ++++++ Больше фичей по Анимации!!!

  • @kanyshaiosmonova7968
    @kanyshaiosmonova7968 2 года назад

    На codepen у вас же автоматически заполняются, вставляются теги как плагины. А у меня нет. Как это сделать расскажите пожалуйста?

  • @ПавелСытник-п9з
    @ПавелСытник-п9з 4 года назад

    Привет, скажи пожалуйста, после написание jquery, всегда выбивает ошибку в браузере, не срабатывает событие.

  • @mishatrick
    @mishatrick 6 лет назад

    Полезно. Хотелось бы увидеть урок по адаптивному меню с гамбургером на css и JQuery

  • @denyspetrushkov5854
    @denyspetrushkov5854 5 лет назад

    Прикольно) спасибо за способ. Ранее делал через три элемента списка, теперь буду делать так

  • @kimura_tenshi_
    @kimura_tenshi_ 5 лет назад

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

  • @mister_robot01
    @mister_robot01 6 лет назад

    Крутые уроки! Покажи пожалуйста как скрывать меню нажатием на любое место(вне кнопки) без заглушек

  • @elephant8852
    @elephant8852 5 лет назад

    Здравствуйте, можете пожалуйста помочь. Я очень плохо разбираюсь в этой теме. Можете пожалуйста подсказать мне как сделать такое меню в WordPress.

  • @kuziakivmarko
    @kuziakivmarko 6 лет назад

    Качественно учишь! Спасибо за годную инфу!

  • @МочаловВладимир-о4щ
    @МочаловВладимир-о4щ 4 года назад +1

    а у меня не заработало. у тебя на 6:12 пропал элемент , потом появился, но у меня он не появился

  • @sixtynice
    @sixtynice 6 лет назад

    Как называется расширение, которое показывает сразу перевод с английского?

  • @gorgrigoryan4213
    @gorgrigoryan4213 6 лет назад

    Круто!
    Можешь показать, как менять цвет при наведении картиночной иконки?

  • @ИгорьГорбунов-ю9ж
    @ИгорьГорбунов-ю9ж 4 года назад

    Благодарю Вас за видео.

  • @БогданСвистун-ы6п
    @БогданСвистун-ы6п 6 лет назад

    а виравнять по центру средний span же можно вот так top: calc(50% - 1px); left: calc(50% - 10px);

  • @Saveli_Sh
    @Saveli_Sh 3 года назад

    спасибо!!! очень понятно и легко!

  • @iam_niam
    @iam_niam 4 года назад +3

    Благодарю! Отличный урок!
    Еле разобрался, что надо прописывать код jquery в уроке внутрь
    $(document).ready(function() {
    });

    • @muhammedjan_kz
      @muhammedjan_kz 4 года назад +1

      у меня не получается

  • @Григорий-т2б
    @Григорий-т2б 5 лет назад

    подскажите пожалуйста я голову уже сломал. КАК вращается палочка (относительно какой точки) ?? Автор говорит, что в случае крестика вращение происходит относительно середины палочки, но как тогда получается крестик ??? Если бы палочка вращалась относительно своего цента тогда они никак не повернулись в крестик

  • @КАбрамян-ш4э
    @КАбрамян-ш4э 6 лет назад

    Спасибо за видео !!! было бы отлично увидеть анимации которий новые не часто повторяются в других местах !

  • @arturzakirov9167
    @arturzakirov9167 6 лет назад

    Артём, здравствуйте! Спасибо за данный урок. Сделайте пожалуйста продолжение как теперь из данной кнопки сделать всплывающее меню

  • @ИльяЗуев-л1ф
    @ИльяЗуев-л1ф 6 лет назад

    Крутой мужик !! Хорошо объясняешь !!

  • @vli7857
    @vli7857 6 лет назад

    Класс!!! Это просто офигенная тема!)))

  • @stasmaksimov9531
    @stasmaksimov9531 6 лет назад

    Больше таких уроков!!! ⚡️

  • @ЕгорГвоздев-щ8ф
    @ЕгорГвоздев-щ8ф 6 лет назад

    чтобы еще прям круче сделать - можно замутить меню-шлагбаум (сначала выезжает вверх, потом опускается в горизонталь)

  • @_Fantom_.
    @_Fantom_. 5 лет назад

    Классная кнопка получилась, пригодится!

  • @_oxios_
    @_oxios_ 6 лет назад

    Супер, спасибо Артем!)

  • @SnitchShow
    @SnitchShow 6 лет назад

    Очень полезная рубрика. Спасибо:)

  • @lehayoureaseparatist733
    @lehayoureaseparatist733 6 лет назад

    Крутая рубрика. Продолжай!

  • @DanyloMinakov
    @DanyloMinakov 5 лет назад

    Скажите пожалуйста как сделать так что бы при клике вне активного блока - он удалялся( то есть если нажать не на меню он становится обычным) Заранее всем спасибо)

  • @Panfilart
    @Panfilart 6 лет назад

    спасибо огромное! очен полезные уроки! всех благ!

  • @СлаваКравцов-т8у
    @СлаваКравцов-т8у 6 лет назад

    Артем спасибо за годную инфу!

  • @RewCSharp
    @RewCSharp 10 месяцев назад

    Спасибо за урок!

  • @AlexandrGazalov
    @AlexandrGazalov 6 лет назад

    У меня свойство border-radius: 50%
    position: relative; не работает что то глушит его как исправить?

  • @entrey_ua
    @entrey_ua 6 лет назад

    Мощь! Хочу ещё фич :)

  • @КоляФемельченко
    @КоляФемельченко 6 лет назад

    Блин, 13 минут, но такой маленький результат, давай продолжение с меню!)

  • @ПавелВасильев-я5ц
    @ПавелВасильев-я5ц 5 лет назад

    продолжение, пожалуйста!!)Все круто

  • @КанторкаЮрки
    @КанторкаЮрки 6 лет назад +1

    Спасибо за видео!Жду новую css вичу

  • @dimaskriptsov5335
    @dimaskriptsov5335 6 лет назад

    Привет.Недавно влез в тему HTML CSS и JavaScript,подскажи пожалуйста как выложить сайт в интернет.Пытался через denwer,но увы не вышло.Как можно еще вывести?Надеюсь прочитаешь(лайк и подписку оформил,полезный контент).

  • @fil0157
    @fil0157 6 лет назад

    Если не сложно покажите как делать адаптивное меню с количеством вложенности подпунктов от 3-4
    Заранее спасибо)

  • @sxmrxk
    @sxmrxk 4 года назад

    просто комментарий, в знак поддержки автору

  • @elbekkhaitov683
    @elbekkhaitov683 6 лет назад

    Продолжай. Хорошо заходит!

  • @КириллМялик-г3х
    @КириллМялик-г3х 6 лет назад

    Все круто, как и всегда !

  • @igorgaiduk5536
    @igorgaiduk5536 6 лет назад

    Здорово, спасибо за урок!

  • @ЮрійНадільний-д5е
    @ЮрійНадільний-д5е 5 лет назад +1

    the best video i have ever seen

  • @АнастасияШелухина-з7е

    какое элегантное решение)

  • @AlexeyPopovkot
    @AlexeyPopovkot 6 лет назад

    Артём, ролик что-то тормозит по-страшному, рекомендую перезалить.
    И ждём ещё полезных и интересных фич.