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

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

КОМЕНТАРІ • 265

  • @sergeyromanyuk5753
    @sergeyromanyuk5753 6 років тому +116

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

    • @ThisDaveAndThatJohn
      @ThisDaveAndThatJohn 6 років тому +2

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

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

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

  • @ganster6853
    @ganster6853 6 років тому +26

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

  • @vzrosly_muzik
    @vzrosly_muzik 4 роки тому +1

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

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

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

  • @one-zero-dev
    @one-zero-dev 6 років тому

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

  • @satieviliyaz7799
    @satieviliyaz7799 5 років тому +1

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

  • @AndruhaLiveChannel
    @AndruhaLiveChannel 6 років тому +4

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

  • @ArtyomKopylov
    @ArtyomKopylov 6 років тому +72

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

  • @ЮрійЛукасевич
    @ЮрійЛукасевич 6 років тому

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

  • @user-alada-kedaura
    @user-alada-kedaura 6 років тому

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

  • @FamilyB-u4s
    @FamilyB-u4s 4 роки тому +1

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

  • @sigmaswarm
    @sigmaswarm 6 років тому +2

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

  • @andriikuzmichov4022
    @andriikuzmichov4022 6 років тому

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

  • @lionlavrov1310
    @lionlavrov1310 4 роки тому

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

  • @TheNcoding
    @TheNcoding 6 років тому +1

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

  • @yuriimelnychuk7510
    @yuriimelnychuk7510 6 років тому

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

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

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

  • @serg9836
    @serg9836 6 років тому

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

  • @ITheHaskI
    @ITheHaskI 6 років тому

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

  • @АндрейЗападный-ш7с
    @АндрейЗападный-ш7с 5 років тому

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

  • @dmitriymovchan6563
    @dmitriymovchan6563 6 років тому +62

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

    • @Alex-jf5vc
      @Alex-jf5vc 6 років тому

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

    • @ganster6853
      @ganster6853 6 років тому

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

    • @Kontrbandist
      @Kontrbandist 6 років тому

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

  • @petiashkas
    @petiashkas 4 роки тому

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

  • @КтоТо-х6ь6ь
    @КтоТо-х6ь6ь 6 років тому

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

  • @MrSergey11
    @MrSergey11 6 років тому

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

  • @sergeimersedes
    @sergeimersedes 6 років тому

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

  • @Kontrbandist
    @Kontrbandist 6 років тому

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

  • @Dikolman
    @Dikolman 6 років тому

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

    • @Dikolman
      @Dikolman 6 років тому

      На 13:18 минуте

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

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

  • @СергейФомин-ъ5ж
    @СергейФомин-ъ5ж 4 роки тому

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

  • @skynet2795
    @skynet2795 4 роки тому

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

  • @mlpalphapony491
    @mlpalphapony491 6 років тому

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

  • @vli7857
    @vli7857 6 років тому

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

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

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

  • @ТарасБабіч-р8я
    @ТарасБабіч-р8я 4 роки тому

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

  • @АзизКаимов-б5я
    @АзизКаимов-б5я 3 роки тому

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

  • @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 же не поддерживает, а значит все яблочники в пролёте.

  • @kuziakivmarko
    @kuziakivmarko 6 років тому

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

  • @ПавелВасильев-я5ц
    @ПавелВасильев-я5ц 5 років тому +2

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

  • @fiery_soul5073
    @fiery_soul5073 6 років тому

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

  • @maximsmirnov887
    @maximsmirnov887 6 років тому

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

  • @leosantoro9995
    @leosantoro9995 6 років тому

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

  • @denyspetrushkov5854
    @denyspetrushkov5854 5 років тому

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

  • @АдаМахачева-у3ш
    @АдаМахачева-у3ш 2 роки тому +1

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

  • @AllinOne-zc7nd
    @AllinOne-zc7nd 6 років тому +3

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

  • @МочаловВладимир-о4щ

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

  • @КАбрамян-ш4э
    @КАбрамян-ш4э 6 років тому

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

  • @ИльяЗуев-л1ф
    @ИльяЗуев-л1ф 6 років тому

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

  • @СветаМитюхина-х6н
    @СветаМитюхина-х6н 5 років тому

    Это очень крутой гайд! Спасибо, Артем, за безуумно крутое видео :)

  • @mishatrick
    @mishatrick 6 років тому

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

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

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

  • @SnitchShow
    @SnitchShow 6 років тому

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

  • @АндрейЦарик-ч7ж
    @АндрейЦарик-ч7ж 6 років тому +1

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

    • @Glo_Academy
      @Glo_Academy  6 років тому

      Меню сделаем

    • @AllinOne-zc7nd
      @AllinOne-zc7nd 6 років тому

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

  • @lehayoureaseparatist733
    @lehayoureaseparatist733 6 років тому

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

  • @sonterix
    @sonterix 6 років тому

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

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

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

  • @ИгорьГорбунов-ю9ж
    @ИгорьГорбунов-ю9ж 4 роки тому

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

  • @ДмитрийБудко-о5р
    @ДмитрийБудко-о5р 6 років тому

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

  • @fierysoul3751
    @fierysoul3751 6 років тому

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

  • @Timyr123msp
    @Timyr123msp 5 років тому

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

    • @Glo_Academy
      @Glo_Academy  5 років тому

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

    • @Timyr123msp
      @Timyr123msp 5 років тому

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

  • @СергейКузнецов-ц6ы
    @СергейКузнецов-ц6ы 6 років тому +1

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

  • @_oxios_
    @_oxios_ 6 років тому

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

  • @stasmaksimov9531
    @stasmaksimov9531 6 років тому

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

  • @Донило-т4ы
    @Донило-т4ы 6 років тому

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

  • @СлаваКравцов-т8у
    @СлаваКравцов-т8у 6 років тому

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

  • @elbekkhaitov683
    @elbekkhaitov683 6 років тому

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

  • @_Fantom_.
    @_Fantom_. 5 років тому

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

  • @mister_robot01
    @mister_robot01 6 років тому

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

  • @КириллМялик-г3х
    @КириллМялик-г3х 6 років тому

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

  • @entrey_ua
    @entrey_ua 6 років тому

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

  • @БогданСвистун-ы6п
    @БогданСвистун-ы6п 6 років тому

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

  • @kimura_tenshi_
    @kimura_tenshi_ 5 років тому

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

  • @ПавелСытник-п9з
    @ПавелСытник-п9з 4 роки тому

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

  • @RewCSharp
    @RewCSharp 11 місяців тому

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

  • @iam_niam
    @iam_niam 5 років тому +3

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

    • @muhammedjan_kz
      @muhammedjan_kz 4 роки тому +1

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

  • @ОразалыИнкарбек
    @ОразалыИнкарбек 6 років тому

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

  • @artempalamarchuk9440
    @artempalamarchuk9440 5 років тому

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

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

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

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

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

  • @Григорий-т2б
    @Григорий-т2б 5 років тому

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

  • @elephant8852
    @elephant8852 6 років тому

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

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

    Очень мощно спасибо )

  • @KrivovNikolay
    @KrivovNikolay 6 років тому

    Вот это супер видео мне понравилось)

  • @sxmrxk
    @sxmrxk 4 роки тому

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

  • @sixtynice
    @sixtynice 6 років тому

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

  • @worus276
    @worus276 6 років тому +5

    Топовый контент

  • @ЮрійНадільний-д5е
    @ЮрійНадільний-д5е 5 років тому +1

    the best video i have ever seen

  • @ДенисОстровський-б3н
    @ДенисОстровський-б3н 5 років тому +5

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

    • @СергейМиронов-з3ы
      @СергейМиронов-з3ы 5 років тому +6

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

  • @kedrovsky9126
    @kedrovsky9126 6 років тому

    ахринеть, копипаст рулит, жалко что только мозги мои от копипаста отрафируются. Лайк за урок.

  • @ПавелВасильев-я5ц
    @ПавелВасильев-я5ц 5 років тому

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

  • @Panfilart
    @Panfilart 6 років тому

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

  • @arturzakirov9167
    @arturzakirov9167 6 років тому

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

  • @КанторкаЮрки
    @КанторкаЮрки 6 років тому +1

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

  • @vovamriya2084
    @vovamriya2084 6 років тому

    Это шикарно!))

  • @lyudmila5013
    @lyudmila5013 6 років тому

    Отличное видео, быстро и понятно.

  • @sergeyromanyuk5753
    @sergeyromanyuk5753 6 років тому

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

  • @stasmaksimov9531
    @stasmaksimov9531 6 років тому

    Гениально! 👍

  • @igorgaiduk5536
    @igorgaiduk5536 6 років тому

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

  • @zeretteompany3094
    @zeretteompany3094 6 років тому

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

    • @Glo_Academy
      @Glo_Academy  6 років тому

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

    • @zeretteompany3094
      @zeretteompany3094 6 років тому

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

  • @КоляФемельченко
    @КоляФемельченко 6 років тому

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