CSS фича #4 ➤ Кнопка меню гамбургер | Burger menu button CSS
Рет қаралды 144,991
6 жыл бұрынВ этом видео мы сделаем бургер-меню. Так называются кнопки, где есть три полоски, которые обычно анимируются при клике. Сегодня мы научимся делать такую кнопку.
Исходники, как всегда тут: 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
@sergeyromanyuk5753 6 жыл бұрын
Вроде и мелочь этот бургерочечек и есть готовые решения, но.. капец как круто когда теперь сам сможешь делать эти кнопочки, потому что понимаешь что за чем и как. Хорошая работа, Артём)
@ThisDaveAndThatJohn 6 жыл бұрын
нужно всегда писать велосипеды чтобы научиться мыслить так как мыслил тот кто уже написал готовое решение.
@AndruhaLiveChannel 6 жыл бұрын
Самые лучшие и понятные уроки, продолжай!!!!
@one-zero-dev 6 жыл бұрын
Артем, анимация отличная! Мой лойс уже отлетел ))) Серия уроков очень нравится! Жду продолжения )
@kanyshaiosmonova7968 2 жыл бұрын
Да, эта рубрика очень нравится. Удачи Вам!
@user-alada-kedaura 6 жыл бұрын
Толковые и нужные CSS-фичи. Продолжай в том же духе(ждем продолжение с меню).
@petiashkas 3 жыл бұрын
Артем, низкий вам поклон и большое человеческое спасибо!
@lionlavrov1310 3 жыл бұрын
Ты так шикарно рассказываешь, все очень понятно и просто. Спасибо за годный урок!
@vzrosly_muzik 4 жыл бұрын
Ты просто офигенно объясняешь! Однозначно подписка и буду смотреть другие видео!!
@user-jn7fq3gw4u 5 жыл бұрын
очень круто делаешь,я в восторге,на данный момент я только учусь и на уровне "0" в js нахожусь,спасибо тебе огромное за урок))
@user-qh5fr3yo1w 6 жыл бұрын
Артём просто здорово :-) Хочу видеть продолжение урока.
@satieviliyaz7799 5 жыл бұрын
Братан, ты крут! Долго не мог понять этот бургег меню, спасибо за ролик большое! Выручил сильно.
@ganster6853 6 жыл бұрын
Круто!!! Артём сделай адаптивное меню
@ITheHaskI 6 жыл бұрын
От твоих видосов одно вдохновение приходит! Продолжай в том же духе
@sigmaswarm 6 жыл бұрын
Я человек простой. Вижу css фичи ставлю лайк))
@sergeimersedes 5 жыл бұрын
Однозначно, тема очень интересна. Ждем продолжения.
@user-xn3lu5yj9c 6 жыл бұрын
Привет, очень классно, я вообще наслаждаюсь этой красотой. А меню адаптивное которое будет выплывать идея очень кстати, буду очень, ну прям очень благодарен! И отдельное спасибо за канал, очень помогает.
@serg9836 6 жыл бұрын
Фичи просто по КД выпускаеш) Походу коменты и лайки реально хорошая мотивация. Уже по стандарту лойс👍
@user-pm8en7be4w 3 жыл бұрын
Круто. И спасибо за исходник.
@yuriimelnychuk7510 6 жыл бұрын
Блин, очень круто, а ведь кода немного, чувак ты богоподобен! Продолжай)
@andriikuzmichov4022 6 жыл бұрын
Эти видео как хороший сериал, новую серию выпустили, пересмотрел, но тебе мало, давайте сразу сезонами выпускать)))
@user-lp1hb2tv9x 6 жыл бұрын
Хороший плейлист, новое виде = сразу лайк не глядя
@bunnybugs6623 Жыл бұрын
Чётко, как заправка для фантазии! Все понятно интерестно пошёл чаечеу запаривать)))
@vli7857 6 жыл бұрын
Класс!!! Это просто офигенная тема!)))
@_oxios_ 6 жыл бұрын
Супер, спасибо Артем!)
@ArtyomKopylov 6 жыл бұрын
Как идея, было бы удобно вначале увидеть превью того что получилось а потом рассказ как сделать. Было бы очень удобно!
@denyspetrushkov5854 5 жыл бұрын
Прикольно) спасибо за способ. Ранее делал через три элемента списка, теперь буду делать так
@mlpalphapony491 6 жыл бұрын
Отличные штучки, продолжайте в том же духе!
@kuziakivmarko 6 жыл бұрын
Качественно учишь! Спасибо за годную инфу!
@user-bt7wj9wy3o 5 жыл бұрын
Это очень крутой гайд! Спасибо, Артем, за безуумно крутое видео :)
@user-wj4xj3dd1c 6 жыл бұрын
Настолько хорошие уроки ,что я даже не поленился написать комментарий :3
@SnitchShow 6 жыл бұрын
Очень полезная рубрика. Спасибо:)
@user-vd6eg5ke7i 4 жыл бұрын
Сижу смотрю и думаю "Афигеть какой я опытный" и тут бах линии гораздо удобнее через трансформацию двигать относительно средней а не через позицию. Который раз удостовериваюсь что нужно любые видео смотреть и даже для новичков)). И кстате такие элементы со сменой состояния лучше на чекбокс вешать что бы js не тянуть. И такой нюанс еще, ненужно псевдоэлиментами злоупотреблять(1. Хоть и мало но замедляют скорость загрузки. 2. В случае чего сложно повесить обработчик).
@Dikolman 6 жыл бұрын
Отличная идея продолжить это меню! И про то что Артём говорил чтобы раскрывалось на полный экран!!!
@Dikolman 6 жыл бұрын
На 13:18 минуте
@lehayoureaseparatist733 6 жыл бұрын
Крутая рубрика. Продолжай!
@worus276 6 жыл бұрын
Топовый контент
@user-tr8mn1bx9d 6 жыл бұрын
Все круто, как и всегда !
@entrey_ua 6 жыл бұрын
Мощь! Хочу ещё фич :)
@Kontrbandist 6 жыл бұрын
Спасибо Артем наконецто понял как зделать самому бургер мену, очень хорошо обяснаяеш. Спасибо!!
@AGM140580 3 жыл бұрын
Молодец! Всё понятно объяснил.
@MrSergey11 6 жыл бұрын
Отличное видео! Интересует еще и стилизация стандартного меню (прижать влево, добавить лого, добавить анимацию).
@fiery_soul5073 6 жыл бұрын
Да, продолжение с меню будет крутым. Покажи как можно больше вариантов его появления!
@vovamriya2084 6 жыл бұрын
Это шикарно!))
@TheNcoding 6 жыл бұрын
Хорошие уроки. Наглядно и понятно. Респект за такой хороший контент. Насчёт меню классная идея. Предлагаю реализовать lite версию mmenu, без лишнего мусора и функционала. На днях тоже задумывался о реализации своего универсального меню. Видосик посмотрел вдохновился идеей.
@user-qk5lr6kt4m 5 жыл бұрын
продолжение, пожалуйста!!)Все круто
@skynet2795 3 жыл бұрын
Круто! ++++++ Больше фичей по Анимации!!!
@user-ju3bp2os4o 6 жыл бұрын
Артем спасибо за годную инфу!
@stasmaksimov9531 6 жыл бұрын
Больше таких уроков!!! ⚡️
@user-pn2ev2je2l 4 жыл бұрын
Благодарю Вас за видео.
@user-dn2dm6tr7o 6 жыл бұрын
Спасибо за видео!Жду новую css вичу
@igorgaiduk5536 6 жыл бұрын
Здорово, спасибо за урок!
@elbekkhaitov683 5 жыл бұрын
Продолжай. Хорошо заходит!
@user-ts1st1gc2q 6 жыл бұрын
Крутой мужик !! Хорошо объясняешь !!
@user-ok8zh1lo7t 6 жыл бұрын
Спасибо за видео !!! было бы отлично увидеть анимации которий новые не часто повторяются в других местах !
@_Fantom_. 4 жыл бұрын
Классная кнопка получилась, пригодится!
@user-qk5lr6kt4m 5 жыл бұрын
Артем, а можно ли отдельно сделать тему к примеру "Основные функции css". В гугле конечно полно этой информации, но с твои уст это реально круто и запоминающееся выглядит. Примеры огонь. Вот например было неплохо, если бы ты показал @media примеров с пояснениями несколько. Спасибо за качественный контент
@lyudmila5013 6 жыл бұрын
Отличное видео, быстро и понятно.
@RewCSharp 5 ай бұрын
Спасибо за урок!
@uladzislauyermakou3834 6 жыл бұрын
Спасибо за интересный контент!
@Panfilart 6 жыл бұрын
спасибо огромное! очен полезные уроки! всех благ!
@user-kq1fr2wp7z 5 жыл бұрын
Потрясающая фича!
@mishatrick 6 жыл бұрын
Полезно. Хотелось бы увидеть урок по адаптивному меню с гамбургером на css и JQuery
@stasmaksimov9531 6 жыл бұрын
Гениально! 👍
@JavaScript_95 Жыл бұрын
Очень мощно спасибо )
@Sha-Kate 2 жыл бұрын
спасибо!!! очень понятно и легко!
@user-re2zd9nu4o 5 жыл бұрын
Продолжай друг 👍🔥🔥🔥
@KrivovNikolay 6 жыл бұрын
Вот это супер видео мне понравилось)
@leosantoro9995 6 жыл бұрын
Побольше бы плюшек с работой чисто на CSS))
@millisstudio5267 6 жыл бұрын
Круто жду новых уроков)
@_pitbull-gameschannel_6701 2 жыл бұрын
Класс!
@f14zy 6 жыл бұрын
Круто!
@nnetify 6 жыл бұрын
Супер!
@sxmrxk 4 жыл бұрын
просто комментарий, в знак поддержки автору
@user-oo5nx4ys5e 6 жыл бұрын
Артем, очень хотелось бы увидеть выезжающее меню!!!
@udacha163 4 жыл бұрын
хотим! продолжай
@user-hm7kv6vb4f 5 жыл бұрын
Спасибо. Очень полезно.
@cyborgundefined1482 6 жыл бұрын
я таки обожаю CSS
@skeelo3157 6 жыл бұрын
Топ урок,жду сл.Видео
@user-jn5cb4zb7f 2 жыл бұрын
какое элегантное решение)
@rooster1242 5 жыл бұрын
Мы требуем продолжения меню!
@anderlee Жыл бұрын
Отлично
@artemijeka 4 жыл бұрын
Спасибо большое!
@sergeyromanyuk5753 6 жыл бұрын
#активностьравнавидосу. Лайки, комменты - все эти перелести делайте, поддержим нашего "Лысого бро")
@user-bd8rz6ok4z 6 жыл бұрын
Спасибо Артем! Интересно было бы увидеть как из этой кнопки еще и меню сделать. А также, меня интересует, как быстро и красиво оформить выпадающий список. И какие трюки с его анимацией можно применить.
@Glo_Academy 6 жыл бұрын
Меню сделаем
@AllinOne-zc7nd 6 жыл бұрын
Без меню фиксированого никак))
@user-sn5nu8mz7f 6 жыл бұрын
Вот такая история! :)
@user-kc3wx1xy2k 6 жыл бұрын
огонь )))
@user-ob4yv6yt4j 4 жыл бұрын
the best video i have ever seen
@user-oi5cr2xj7m 6 жыл бұрын
Блин, 13 минут, но такой маленький результат, давай продолжение с меню!)
@maximsmirnov887 6 жыл бұрын
Спасибо за видео. Почему Вы не использовали такой стиль "top: calc(50% - 1px);"?
@dmitriymovchan6563 6 жыл бұрын
Хочу увидеть продолжение с меню.
@Alex-jf5vc 6 жыл бұрын
продолжение с меню уже есть на канале
@ganster6853 6 жыл бұрын
Оно уже старое
@Kontrbandist 6 жыл бұрын
Поддерживаю!
@mister_robot01 6 жыл бұрын
Крутые уроки! Покажи пожалуйста как скрывать меню нажатием на любое место(вне кнопки) без заглушек
@arturzakirov9167 6 жыл бұрын
Артём, здравствуйте! Спасибо за данный урок. Сделайте пожалуйста продолжение как теперь из данной кнопки сделать всплывающее меню
@AlexanderShamarin 6 жыл бұрын
Не новое, но все равно спасибо, хорошо рассказываешь.
@serhii_chechelnytskyi 5 жыл бұрын
Спасибо!
@user-jg7ly1ib2z 4 жыл бұрын
Жду продолжение
@user-mu8mt9jv7s 5 жыл бұрын
аа ты спас мя я теперь запомню на всегда align-items:center!в flexbox!!!!
@user-jm9on5ne7l 6 жыл бұрын
А есть разница, как делать кнопку, тегом или ?
@WhaleShow 5 жыл бұрын
очень круто
@user-dn5vw1qe2y 4 жыл бұрын
А какую ты используешь библиотеку jquery?
@arhwoodcnc7221 6 жыл бұрын
спасибо боьлшое Артём))) сделай плавную прокрутку для якорей по лендингу)))
@user-nf6xv1dk5t 6 жыл бұрын
Испрльзуя, jQuery это можно уместить в 3 строки. Мне кажется что урок из этого не выйдет..
@d_donskoy862 6 жыл бұрын
Діма Куліковський если на чистом js сделает, то очень полезно будет
@andyvi3116 6 жыл бұрын
у меня уже есть готовый скрипт на чистом js - github.com/BlackFxTalon/scroll-to-link
@MrInkognitod 4 жыл бұрын
в css можно добавить "html { scroll-behavior: smooth; }"
@user-sb2yd8fp9n 4 жыл бұрын
@@MrInkognitod safari же не поддерживает, а значит все яблочники в пролёте.
@sonterix 6 жыл бұрын
Такой вопрос: В первом варианте (с крестиком) - крестик складывается с права, так сказать. (это можно заметить в видео 10:26) А как сделать так, чтоб крестик складывался с цента? Спасибо за ответ
Ulbi TV
Рет қаралды 59 М.
Nikita Iudin
Рет қаралды 756
Фрілансер по життю
Рет қаралды 400 М.
GreatStack
Рет қаралды 38 М.