CSS фича #4 ➤ Кнопка меню гамбургер | Burger menu button CSS
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- В этом видео мы сделаем бургер-меню. Так называются кнопки, где есть три полоски, которые обычно анимируются при клике. Сегодня мы научимся делать такую кнопку.
Исходники, как всегда тут: codepen.io/Ais...
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
#Вебразработка #Верстка #АртемИсламов #GloAcademy #ВидеоУроки #Курсы #СозданиеСайтов #CSS #CSS3 #CSSАнимация #CSSAnimation #CSSКнопкаМеню #БургерМенюКнопка #Видеоурок #УрокиПоCSS #CSSTransform #CSSBurgerMenu #HamburgerMenu #BurgerTutorial
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...
Вроде и мелочь этот бургерочечек и есть готовые решения, но.. капец как круто когда теперь сам сможешь делать эти кнопочки, потому что понимаешь что за чем и как.
Хорошая работа, Артём)
нужно всегда писать велосипеды чтобы научиться мыслить так как мыслил тот кто уже написал готовое решение.
Самые лучшие и понятные уроки, продолжай!!!!
Братан, ты крут! Долго не мог понять этот бургег меню, спасибо за ролик большое! Выручил сильно.
Я человек простой. Вижу css фичи ставлю лайк))
Отличная идея продолжить это меню! И про то что Артём говорил чтобы раскрывалось на полный экран!!!
На 13:18 минуте
очень круто делаешь,я в восторге,на данный момент я только учусь и на уровне "0" в js нахожусь,спасибо тебе огромное за урок))
Блин, очень круто, а ведь кода немного, чувак ты богоподобен! Продолжай)
Класс!!! Это просто офигенная тема!)))
Круто! ++++++ Больше фичей по Анимации!!!
Качественно учишь! Спасибо за годную инфу!
Артем, очень хотелось бы увидеть выезжающее меню!!!
Благодарю Вас за видео.
Побольше бы плюшек с работой чисто на CSS))
the best video i have ever seen
Очень полезная рубрика. Спасибо:)
#активностьравнавидосу.
Лайки, комменты - все эти перелести делайте, поддержим нашего "Лысого бро")
спасибо огромное! очен полезные уроки! всех благ!
Продолжай. Хорошо заходит!
Мощь! Хочу ещё фич :)
аа ты спас мя я теперь запомню на всегда align-items:center!в flexbox!!!!
ахринеть, копипаст рулит, жалко что только мозги мои от копипаста отрафируются. Лайк за урок.
Спасибо за видео!Жду новую css вичу
Класс!
Потрясающая фича!
Подскажите пожалуйста какой редактор кода использован в этом видео
Подскажите пожалуйста, почему вы используете тег , не тег
Просто для примера. Использовать можно и то и то, в зависимости от смысла элемента
@@Glo_Academy я хочу сделать кнопку лайк, при нажатии на нее остается синий квадрат вокруг значка, вот сижу мучаюсь, если есть ссылка по таким кнопкам, буду благодарен
Круто!
Можешь показать, как менять цвет при наведении картиночной иконки?
Красава
А как использовать сокращенные записи? Пишем a.menu-btn, получаем -->> ??
На codepen у вас же автоматически заполняются, вставляются теги как плагины. А у меня нет. Как это сделать расскажите пожалуйста?
спасибо)
Делай полное меню пожалуйста ))
спасибо
Ссылка с классом menu-btn и в js preventDefault
Артем сделай фичу про стилизацию select на js
давай адаптивное выдвигающиеся меню
Артём спасибо за уроки. Предлагаю в следующей теме разберать вот такие слайдеры: demo.drfuri.com/mrbara/
Го такое меню замути мне нужно для диплома я магазин делаю)
Артур Килинін где ты учишься?
Ещё.
Как идея, было бы удобно вначале увидеть превью того что получилось а потом рассказ как сделать. Было бы очень удобно!
Хочу увидеть продолжение с меню.
продолжение с меню уже есть на канале
Оно уже старое
Поддерживаю!
Круто!!!
Артём сделай адаптивное меню
Сейчас это всё так же работает как 4 года назад? Я щас пытаюсь повторить и анимация не работает ни в какую
а у меня не заработало. у тебя на 6:12 пропал элемент , потом появился, но у меня он не появился
В чём моя ошибка?
$('.menu-btn').on('click', function(event) {e.preventDefault; $(this).toggleClass('menu-btn_active');});
Нашёл ошибку? У меня тоже не работает
спасибо боьлшое Артём)))
сделай плавную прокрутку для якорей по лендингу)))
Испрльзуя, jQuery это можно уместить в 3 строки. Мне кажется что урок из этого не выйдет..
Діма Куліковський если на чистом js сделает, то очень полезно будет
у меня уже есть готовый скрипт на чистом js - github.com/BlackFxTalon/scroll-to-link
в css можно добавить "html {
scroll-behavior: smooth; }"
@@MrInkognitod safari же не поддерживает, а значит все яблочники в пролёте.
Благодарю! Отличный урок!
Еле разобрался, что надо прописывать код jquery в уроке внутрь
$(document).ready(function() {
});
у меня не получается
посмотрел и понял, что ловить тут нечего...
Интересно посмотреть реализацию этих всех jQuery на чистом JS. Ведь зачем тянуть за собой весь поезд, если нужен только один вагон.
Самое время через 6 месяцев:
document.querySelector('.menu-btn').addEventListener('click', (evt) => {
evt.preventDefault();
this.classList.toggle('menu-btn_active');
});
e.preventDefault(); - небольшая поправка)
а для чего его писать?
Здравствуйте, можете пожалуйста помочь. Я очень плохо разбираюсь в этой теме. Можете пожалуйста подсказать мне как сделать такое меню в WordPress.
Привет, скажи пожалуйста, после написание jquery, всегда выбивает ошибку в браузере, не срабатывает событие.
может кто нить подскажет. как только js прописали у меня не происходит анимация. как сделать что бы работало. я млжет jquery не подключил ибо с этим не работал еще
Тоже самое . Не разобрались ?
@@rafaelbuberenko650 тоже самое
Артем, а можно ли отдельно сделать тему к примеру "Основные функции css". В гугле конечно полно этой информации, но с твои уст это реально круто и запоминающееся выглядит. Примеры огонь. Вот например было неплохо, если бы ты показал @media примеров с пояснениями несколько. Спасибо за качественный контент
Сижу смотрю и думаю "Афигеть какой я опытный" и тут бах линии гораздо удобнее через трансформацию двигать относительно средней а не через позицию. Который раз удостовериваюсь что нужно любые видео смотреть и даже для новичков)). И кстате такие элементы со сменой состояния лучше на чекбокс вешать что бы js не тянуть. И такой нюанс еще, ненужно псевдоэлиментами злоупотреблять(1. Хоть и мало но замедляют скорость загрузки. 2. В случае чего сложно повесить обработчик).
Чётко, как заправка для фантазии! Все понятно интерестно пошёл чаечеу запаривать)))
Запиши пожалуйста урок по поповоду плавных переходов между страницами + красивой загрузкой.
Вот пример: talecamp.com
03:47 здесь по моему должен быть margin-bottom? или я ошибся?
Умные люди, подскажите пожалуйста, как в таплинк это вставить? Или где можно посмотреть?😅
Скажите пожалуйста как сделать так что бы при клике вне активного блока - он удалялся( то есть если нажать не на меню он становится обычным) Заранее всем спасибо)
мне надо чтобы стрелка была вправо. Что надо менять, и на какие значения???????
Не могу понять почему меню у меня расползается на весь экран по горизонтали. Я свой код несколько раз перепроверил с исходником и все одинаково.
что за шрифт у кода? скобки прикольные полукруглые такие...
А какую ты используешь библиотеку jquery?
Топовый контент
отличное видео ! Сделай разбор кода css & JavaScript самых крутых сайтов , например : avtivetheoty.net , launchit.shanemielke.com, kikk.be, globin.org, uix.me .
Хорошие уроки. Наглядно и понятно. Респект за такой хороший контент. Насчёт меню классная идея. Предлагаю реализовать lite версию mmenu, без лишнего мусора и функционала. На днях тоже задумывался о реализации своего универсального меню. Видосик посмотрел вдохновился идеей.
Ты просто офигенно объясняешь! Однозначно подписка и буду смотреть другие видео!!
Что то с видео, долго прогружается. Может перезалить?!
Чтобы просмотреть, пришлось скачивать.
Артёма не будет, он принял Ислам
у меня не появляется три полоски сделал два псевдо имен
комент
Молодец! Всё понятно объяснил.
АРТЕМ!!! Надеюсь, ты читаешь комменты! Делая стрелочку, я захотел, чтоб она показывала направо, а не налево, как в видео, соответственно, я прописываю в transform-origin: right... . Но бургер сломался!:( При изменении ширины псевдоэлементов, они становятся по-средине, а не с краю. Как быть? Помоги! Выручай!!! ALARM ALARM
Нужно поменять и transform-origin и поменять градусы. Покрути их туда сюда, чтобы разобраться. Готовое решение писать не буду, ты должен разобраться сам. Иначе не будет никакого кайфа) дерзай!
Круто. И спасибо за исходник.
Здравствуйте! помогите найти ошибку! кнопка не анимируеться codepen.io/voroba/pen/JZegVY
Когда открываю исходник, все хорошо работает. Вставляю с исходника код в свой codepan и перестает работать! мистика...
Вряд ли полезно, но на всякий случай... Ты забыл подключить jQuery.
спасибо!!! очень понятно и легко!
подскажите пожалуйста я голову уже сломал. КАК вращается палочка (относительно какой точки) ?? Автор говорит, что в случае крестика вращение происходит относительно середины палочки, но как тогда получается крестик ??? Если бы палочка вращалась относительно своего цента тогда они никак не повернулись в крестик
Я до сих пор не понял
Все круто, но кнопка должна быть кнопкой, а ссылка ссылкой. В данном случае при нажатии на бургер не происходит никакого перехода, как раз для перехода и нужна ссылка. А при нажатии на кнопку просто что-то показывается.
Согласен, кнопка должна быть кнопкой, а ссылка ссылкой. Но если пойти чуть дальше и предусмотреть, что будет, если в браузере пользователя отключен JavaScript, то кнопка меню как раз может быть ссылкой, потому что будет выступать якорной ссылкой на скрытый блок меню, который можно показывать или скрывать с помощью селектора :target и идентификатора
Почему ты такой пиздатый ?
как выгрузить сайт в интернет
👍👍
👍👍👍
Goog
елементарно
Ааахуэээнннааааа!
Очень мощно спасибо )
prosta class
Отлично
Магия
Магия
какое элегантное решение)
Спасибо за урок!
Почему сначала псевдокласс присваивается через :: а потом через : ?
Псевдоэлементы могут присваиваться как с двойным двоеточием, так и с одинарным.
Посоветуй книги
Не работает твой JS
я таки обожаю CSS
Продолжение!!!
niiiice
Спасибо