CSS фича #4 ➤ Кнопка меню гамбургер | Burger menu button CSS
Вставка
- Опубліковано 6 чер 2018
- В этом видео мы сделаем бургер-меню. Так называются кнопки, где есть три полоски, которые обычно анимируются при клике. Сегодня мы научимся делать такую кнопку.
Исходники, как всегда тут: codepen.io/Aislam23/pen/aKveGp
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
#Вебразработка #Верстка #АртемИсламов #GloAcademy #ВидеоУроки #Курсы #СозданиеСайтов #CSS #CSS3 #CSSАнимация #CSSAnimation #CSSКнопкаМеню #БургерМенюКнопка #Видеоурок #УрокиПоCSS #CSSTransform #CSSBurgerMenu #HamburgerMenu #BurgerTutorial
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork
Вроде и мелочь этот бургерочечек и есть готовые решения, но.. капец как круто когда теперь сам сможешь делать эти кнопочки, потому что понимаешь что за чем и как.
Хорошая работа, Артём)
нужно всегда писать велосипеды чтобы научиться мыслить так как мыслил тот кто уже написал готовое решение.
Самые лучшие и понятные уроки, продолжай!!!!
Толковые и нужные CSS-фичи. Продолжай в том же духе(ждем продолжение с меню).
Артем, анимация отличная! Мой лойс уже отлетел ))) Серия уроков очень нравится! Жду продолжения )
Ты просто офигенно объясняешь! Однозначно подписка и буду смотреть другие видео!!
Да, эта рубрика очень нравится. Удачи Вам!
Ты так шикарно рассказываешь, все очень понятно и просто. Спасибо за годный урок!
Артем, низкий вам поклон и большое человеческое спасибо!
Братан, ты крут! Долго не мог понять этот бургег меню, спасибо за ролик большое! Выручил сильно.
очень круто делаешь,я в восторге,на данный момент я только учусь и на уровне "0" в js нахожусь,спасибо тебе огромное за урок))
Артём просто здорово :-) Хочу видеть продолжение урока.
От твоих видосов одно вдохновение приходит! Продолжай в том же духе
Я человек простой. Вижу css фичи ставлю лайк))
Это очень крутой гайд! Спасибо, Артем, за безуумно крутое видео :)
Фичи просто по КД выпускаеш) Походу коменты и лайки реально хорошая мотивация. Уже по стандарту лойс👍
Однозначно, тема очень интересна. Ждем продолжения.
Хороший плейлист, новое виде = сразу лайк не глядя
Круто!!!
Артём сделай адаптивное меню
Отличные штучки, продолжайте в том же духе!
Блин, очень круто, а ведь кода немного, чувак ты богоподобен! Продолжай)
Привет, очень классно, я вообще наслаждаюсь этой красотой. А меню адаптивное которое будет выплывать идея очень кстати, буду очень, ну прям очень благодарен! И отдельное спасибо за канал, очень помогает.
Качественно учишь! Спасибо за годную инфу!
Прикольно) спасибо за способ. Ранее делал через три элемента списка, теперь буду делать так
Настолько хорошие уроки ,что я даже не поленился написать комментарий :3
Класс!!! Это просто офигенная тема!)))
Очень полезная рубрика. Спасибо:)
Эти видео как хороший сериал, новую серию выпустили, пересмотрел, но тебе мало, давайте сразу сезонами выпускать)))
Круто. И спасибо за исходник.
Спасибо Артем наконецто понял как зделать самому бургер мену, очень хорошо обяснаяеш. Спасибо!!
Чётко, как заправка для фантазии! Все понятно интерестно пошёл чаечеу запаривать)))
Супер, спасибо Артем!)
Крутая рубрика. Продолжай!
продолжение, пожалуйста!!)Все круто
Отличная идея продолжить это меню! И про то что Артём говорил чтобы раскрывалось на полный экран!!!
На 13:18 минуте
Спасибо за видео !!! было бы отлично увидеть анимации которий новые не часто повторяются в других местах !
Артем спасибо за годную инфу!
Мощь! Хочу ещё фич :)
Крутой мужик !! Хорошо объясняешь !!
Спасибо за видео!Жду новую css вичу
Больше таких уроков!!! ⚡️
Хорошие уроки. Наглядно и понятно. Респект за такой хороший контент. Насчёт меню классная идея. Предлагаю реализовать lite версию mmenu, без лишнего мусора и функционала. На днях тоже задумывался о реализации своего универсального меню. Видосик посмотрел вдохновился идеей.
Все круто, как и всегда !
Классная кнопка получилась, пригодится!
Отличное видео! Интересует еще и стилизация стандартного меню (прижать влево, добавить лого, добавить анимацию).
Молодец! Всё понятно объяснил.
Отличное видео, быстро и понятно.
спасибо огромное! очен полезные уроки! всех благ!
Сижу смотрю и думаю "Афигеть какой я опытный" и тут бах линии гораздо удобнее через трансформацию двигать относительно средней а не через позицию. Который раз удостовериваюсь что нужно любые видео смотреть и даже для новичков)). И кстате такие элементы со сменой состояния лучше на чекбокс вешать что бы js не тянуть. И такой нюанс еще, ненужно псевдоэлиментами злоупотреблять(1. Хоть и мало но замедляют скорость загрузки. 2. В случае чего сложно повесить обработчик).
Здорово, спасибо за урок!
Круто! ++++++ Больше фичей по Анимации!!!
Спасибо за интересный контент!
Да, продолжение с меню будет крутым. Покажи как можно больше вариантов его появления!
Как идея, было бы удобно вначале увидеть превью того что получилось а потом рассказ как сделать. Было бы очень удобно!
Топовый контент
Продолжай. Хорошо заходит!
Артем, а можно ли отдельно сделать тему к примеру "Основные функции css". В гугле конечно полно этой информации, но с твои уст это реально круто и запоминающееся выглядит. Примеры огонь. Вот например было неплохо, если бы ты показал @media примеров с пояснениями несколько. Спасибо за качественный контент
Полезно. Хотелось бы увидеть урок по адаптивному меню с гамбургером на css и JQuery
Побольше бы плюшек с работой чисто на CSS))
Благодарю Вас за видео.
Спасибо за урок!
Это шикарно!))
Вот это супер видео мне понравилось)
спасибо!!! очень понятно и легко!
просто комментарий, в знак поддержки автору
Круто жду новых уроков)
Потрясающая фича!
Артем, очень хотелось бы увидеть выезжающее меню!!!
Очень мощно спасибо )
Продолжай друг 👍🔥🔥🔥
Топ урок,жду сл.Видео
Спасибо. Очень полезно.
Гениально! 👍
хотим! продолжай
Блин, 13 минут, но такой маленький результат, давай продолжение с меню!)
Мы требуем продолжения меню!
Спасибо Артем! Интересно было бы увидеть как из этой кнопки еще и меню сделать. А также, меня интересует, как быстро и красиво оформить выпадающий список. И какие трюки с его анимацией можно применить.
Меню сделаем
Без меню фиксированого никак))
the best video i have ever seen
Спасибо большое!
Хочу увидеть продолжение с меню.
продолжение с меню уже есть на канале
Оно уже старое
Поддерживаю!
какое элегантное решение)
Супер!
Не новое, но все равно спасибо, хорошо рассказываешь.
я таки обожаю CSS
Артём, здравствуйте! Спасибо за данный урок. Сделайте пожалуйста продолжение как теперь из данной кнопки сделать всплывающее меню
Круто!
спасибо боьлшое Артём)))
сделай плавную прокрутку для якорей по лендингу)))
Испрльзуя, jQuery это можно уместить в 3 строки. Мне кажется что урок из этого не выйдет..
Діма Куліковський если на чистом js сделает, то очень полезно будет
у меня уже есть готовый скрипт на чистом js - github.com/BlackFxTalon/scroll-to-link
в css можно добавить "html {
scroll-behavior: smooth; }"
@@MrInkognitod safari же не поддерживает, а значит все яблочники в пролёте.
Спасибо за видео. Почему Вы не использовали такой стиль "top: calc(50% - 1px);"?
Вот такая история! :)
Жду продолжение
Класс!
аа ты спас мя я теперь запомню на всегда align-items:center!в flexbox!!!!
Крутые уроки! Покажи пожалуйста как скрывать меню нажатием на любое место(вне кнопки) без заглушек
Отлично
Спасибо!
#активностьравнавидосу.
Лайки, комменты - все эти перелести делайте, поддержим нашего "Лысого бро")
Круто!
Можешь показать, как менять цвет при наведении картиночной иконки?
очень круто
ахринеть, копипаст рулит, жалко что только мозги мои от копипаста отрафируются. Лайк за урок.
огонь )))
А какую ты используешь библиотеку jquery?