UI-компоненты №14. Простое бургер-меню

Рет қаралды 13,236

Күн бұрын

Привет!
В этой части ui-компонентов я покажу, как сделать простое бургер меню для сайта, которое вы будете встречать в 90% лендингов в работе)
Содержание:
00:00 - Интро
00:45 - Пишем HTML
01:50 - Пишем CSS
16:51 - Пишем JS
21:34 - Решаем несколько проблем
28:20 - Аутро
github.com/maxdenaro/maxgraph... - готовая верстка на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
Для заказа верстки обращайтесь в телеграм @maxdenaro
#ityoutubersru #ui_компоненты #верстка

Пікірлер: 96

@blackcelebration3588 2 жыл бұрын

Спасибо, Макс. Очень нравятся Ваши уроки.

@maxgraph 2 жыл бұрын

Пожалуйста)

@kirillgrinevich 2 жыл бұрын

Спасибо большое Вам! Продолжайте снимать ролики, все очень доступно и понятно! Это уже не первое Ваше видео, которое я смотрю для решения своих задач в построении сайтов

@maxgraph 2 жыл бұрын

Пожалуйста) конечно, буду продолжать

@apelsin4ik2901 2 жыл бұрын

Спасибо большое за меню! Наконец то нормальное видео про бургер, без воды.

@maxgraph 2 жыл бұрын

Пожалуйста)

@user-io2ec1vq7n 8 ай бұрын

Огромное вам спасибо! Желаю успехов вам)

@user-eo6ex8ds8q Жыл бұрын

Блин, какой ты молодец, Макс! Так доступно все объясняешь! Спасибо огромное!!!

@maxgraph Жыл бұрын

Пожалуйста)

@marina-ej4qd9kc1wh Жыл бұрын

Очень приятное видео про бургер-меню!

@user-pm4hx1bd4n Жыл бұрын

Лучшее объяснение по реализации бургер-меню, Максим Вы лучший успехов Вам.

@maxgraph Жыл бұрын

Спасибо)

@ynwa2290 2 жыл бұрын

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

@maxgraph 2 жыл бұрын

Пожалуйста))

@Elisha_GG 2 жыл бұрын

Вроде умею бургер делать, никогда проблема не было, но видео глянул, спасибо.

@user-hc7wq9om9i 2 жыл бұрын

Спасибо большое, спасибо за то, что объясняете свои действия!

@maxgraph 2 жыл бұрын

Пожалуйста =)

@Doldskey 2 жыл бұрын

Максим, как всегда лайк! Скоро понадобится данный урок :)

@maxgraph 2 жыл бұрын

👍

@biLLie_wiLLie 2 жыл бұрын

нравятся твои уроки! Было бы круто в начале показывать готовый результат. Спасибо тебе

@maxgraph 2 жыл бұрын

Спасибо, учту) но вообще многие видео я пишу специально без подготовки, так сказать вживую

@nekrartgb 2 жыл бұрын

@@maxgraph Да так было бы очень удобно:) спасибо за контент:)

@Soap9613 2 жыл бұрын

@@maxgraph лучше с подготовкой!

@dmitryg.9533 Жыл бұрын

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

@_pheax Жыл бұрын

класс, обьяснил "что, куда, откудо" , спасибо Макс

@maxgraph Жыл бұрын

Пожалуйста)

@anonymous_ua 2 жыл бұрын

Спасибо за уроки =)

@maxgraph 2 жыл бұрын

Пожалуйста)

@user-pf7ht6th8x 5 ай бұрын

Спасибо!

@ilya10rus 4 ай бұрын

Спасибо😊

@vladislavmikhailov 2 жыл бұрын

Спасибули! Больше понятно!

@maxgraph 2 жыл бұрын

Пожалуйста)

@user-bp9yg9cj9j 2 жыл бұрын

Макс лови Лайкс!

@maxgraph 2 жыл бұрын

Спасибо)

@user-lm9ee1gn5p 2 жыл бұрын

Спасибо)

@maxgraph 2 жыл бұрын

Пожалуйста)

@dis1755 2 жыл бұрын

Макс, привет!) Крутые видео! Не планируешь записать реализацию по загрузки файлов в форме с возможностью drag and drop загрузки ? И кастомизацию инпута, ну и с валидацией по макс числу файлов, по типу, по размеру. В инете нету ни одного толкового видео на эту тему.

@maxgraph 2 жыл бұрын

Привет, спасибо) Можно сделать в общем-то, запишу в план)

@raliver237 Жыл бұрын

🥰😃😃

@GeorgyDev11111 2 жыл бұрын

Все супер! p.s у кого свойство --header-height не работает, попробуйте создать его не в @media, а глобально

@maxgraph 2 жыл бұрын

Спасибо)

@detro1821 2 жыл бұрын

4k качество это конечно сильно)

@user-mv1dg9fg5m 2 жыл бұрын

Спасибо за контент!) А не лучше ли сделать анимацию только на transform? Что бы не менять top и botton, ведь они нагружают fps))

@maxgraph 2 жыл бұрын

Не сильно тут большая нагрузка

@jackyiakovenko 2 жыл бұрын

еще вопросик и все 🤣я вот как-то закончил последний марафон на новой зборке галпа теперь дорабативаю и возник вопрос а что если все изображения в проекте ( кроме PNG которые используются для бэкграундов ) встевить через тег picture?это в целом плюс или без разницы?

@maxgraph 2 жыл бұрын

Для этого есть миксин image-set в сборке)

@daulettulepbergenov9151 2 жыл бұрын

Здравствуйте, спасибо за видео! у меня вопрос что за знак вопроса в js когда пишите document?

@maxgraph 2 жыл бұрын

Здравствуйте, я пояснил это в видео, посмотрите внимательно)

@Sergus1984 2 жыл бұрын

Макс, привет! Спасибо за урок! Не подскажешь, какая у тебя цветовая схема в редакторе? Спасибо.

@maxgraph 2 жыл бұрын

Привет, one monokai)

@Sergus1984 2 жыл бұрын

@@maxgraph странно, у меня она выглядит по-другому)

@unity_12 2 жыл бұрын

Есть идея для плейлиста! Coffee CMS

@maxgraph 2 жыл бұрын

Что-то интересное?)

@world_of_facts_shorts 2 жыл бұрын

Очень круто видео. А можно такое же только с многоуровневым меня?

@maxgraph 2 жыл бұрын

Уже было))

@user-yf4wm3oz4r 2 жыл бұрын

Макс привет! А как сделать, чтобы по клику вне области моб. меню оно закрывалось автоматически. То есть не только по нажатию крестика

@Vladikslavik 2 жыл бұрын

Клик по body

@user-yf4wm3oz4r 2 жыл бұрын

@@Vladikslavik верно

@Vladikslavik 2 жыл бұрын

@@user-yf4wm3oz4r догадается человек или нет? Короче, только с условием, чтобы класс e.target не равнялся классам бургера и ссылок меню.

@user-lf1di3fd3x Жыл бұрын

Максим, подскажите плиз, почему псевдоэлементы для кнопки делаются для burger, а не для burger__line?

@maxgraph Жыл бұрын

Так удобнее их позиционировать

@lwickboxl 2 жыл бұрын

Спасибо за урок, ну и aria-expanded="true" при открытии можно сделать

@maxgraph 2 жыл бұрын

Если не сделал вдруг - да!)

@BMikel 2 жыл бұрын

А в script.js, когда получаем дом элементы, зачем ? знак вопроса после document?

@maxgraph 2 жыл бұрын

Посмотрите урок внимательно, я там все рассказал)

@icegouse 2 жыл бұрын

Покажи следующем видео, как сделать, в таком же меню, то "выпадающее меню". Я так и чую что там дописать надо из этого. Мне не понятно как добавить. Попытаюсь методом втыка как всегда. :)

@maxgraph 2 жыл бұрын

Посмотрите урок про мега меню на канале)

@hextroopgames 2 жыл бұрын

Здравствуйте Максим. Повторил ваш вариант бургера. Заметил такую вещь, у вас в видео она тоже промелькнула, при уменьшении вьюпорта на мгновение появляется бургер меню и анимируется его закрытие, смотрится не очень. Есть вариант как это пофиксить?

@maxgraph 2 жыл бұрын

Здравствуйте. Добавлять транзишн через js попозже нужно видимо.

@kasmacov 2 жыл бұрын

@@maxgraph Здравствуйте! Не могли бы вы подробней рассказать про это для чайников?

@maximegorov7405 Жыл бұрын

@@kasmacov Один из вариантов: В js: window.onload = function () { nav?.classList.toggle("transition"); }; В css: .transition { transition: transform 0.6s ease-in-out; }

2 жыл бұрын

А что за знаки вопроса у тебя в ЖС коде ?

@maxgraph 2 жыл бұрын

Пересмотри видео, сразу после их написания я сказал зачем это)

@alexkir9312 Жыл бұрын

Люди добрые, подскажите отсталому, что за расширение для браузера используется, чтобы вот так прямо в браузере сжимать страничку, подставляя разные разрешения экрана?!?!

@maxgraph Жыл бұрын

Никакое)) это device toggle toolbar в браузере, погугли

@alexkir9312 Жыл бұрын

@@maxgraph благодарю мил человек)

@maxvahrushev5154 Жыл бұрын

Все бы хорошо, но почему даже в твоих видео есть большие косяки, например, после клика нужно останавливать событие клик, либо оно будет копиться, или эта информация из разряда купите мой курс там будет?

@maxgraph Жыл бұрын

Ты сам себе что-то придумал) какие курсы? 😀 Почему нужно? Не вижу проблем

@maxvahrushev5154 Жыл бұрын

@@maxgraph ничего против не имею против тебя ты гений для меня, ты забыл про эту вещь? Я просто учусь фронту и сам об этом только сегодня узнал

@maxgraph Жыл бұрын

Звучало иначе)) Но нет, я конечно не гений =)

@vitalb7907 2 жыл бұрын

не совсем ясно по поводу знака вопроса, который проверяет существует ли переменная. где именно его нужно указывать? по факту если первый раз использовать при объявление переменной, и переменной не будет такой, то код не сработает. но в видео почему то и дальше его используют при отслеживание клика

@maxgraph 2 жыл бұрын

А вы попробуйте убрать бургер со страницы, как отработает код с и без ?

@vitalb7907 2 жыл бұрын

@@maxgraph вопрос немного не в этом. не ясно как использовать такое объявление, то есть везде в коде нужно по всему файлу писать именно со знаком вопросом? не проще тогда сделать запись такой: const burger = document.querySelector('[data-burder]'); if (!burger) return; и тут ниже уже сам код, и не переживать что где то потом пропустил поставить этот знак вопроса и все сломаеться.

@maxgraph 2 жыл бұрын

Может и проще, я использую разные варианты, и ставил везде для надёжности

@vitalb7907 2 жыл бұрын

@@maxgraph ну вот я как раз и не могу понять как именно это использовать) это точно что то новенькое) может что то и лучше. почитаю про это. за урок спасибо, все очень круто :)

@amat0ru 2 жыл бұрын

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

@maxgraph 2 жыл бұрын

Поменять можно как угодно, стили же можно переопределять)

@jackyiakovenko 2 жыл бұрын

макс к тебе экстренный вопрос(телегу снес 😂спрошу тут)так: собираю я твой последний марафон на новой зборке галпа(еле с импортами разобрался) у тебя там Head в отделном файле который подключааю на каждой странице но как теперь сделать так чтоб на каждой странице в бразуре отображалась название самой страницы а то на всех страницах одно название 😎

@maxgraph 2 жыл бұрын

Можешь попробовать передавать переменные в file include Или забить, это все равно уже на натяжке же будет