Создание анимированного меню на CSS3 и JavaScript

Каждый сайт должен иметь красивую шапку с меню. В ходе урока мы создадим анимированное меню на CSS3 и с небольшим использованием JavaScript.
💸Бесплатный курс по заработку на создании сайтов: bit.ly/2okLSUP
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼‍💻
- Все уроки по хештегу #goshaLessons

Пікірлер: 127

  • @sergeialfyorov9954
    @sergeialfyorov99545 жыл бұрын

    какого хрена это так просто?! я думал там миллион строк скрипта будет... спасибо за видио, очень познавательно новичкам

  • @valerijstudent552
    @valerijstudent5523 жыл бұрын

    Молодец, Георгий! Умеете давать материал! Всякий раз получаю не только информацию, но и удовольствие от изучения! Спасибо!

  • @kilomaziec
    @kilomaziec3 жыл бұрын

    Спасибо за урок. Подробно, понятно и доступно. Ждём больше таких уроков.!

  • @os743
    @os7432 жыл бұрын

    Ну так понятно объяснить чайнику такое за 15 минут - это прям талант. Спасибо тебе за это видео! Очень благодарен!

  • @SkelerStrike
    @SkelerStrike5 жыл бұрын

    Лучший! Давай больше такого добра!) Предлагаю назвать эту серию видео "Фишки от Дударя"

  • @qtshades
    @qtshades4 жыл бұрын

    Молодец чувак. Написал, объяснил, показал. побольше уроков по js!

  • @DrovosekTv
    @DrovosekTv5 жыл бұрын

    Да, нужны ещё, очень интересно, серьёзно

  • @paradox-player
    @paradox-player5 жыл бұрын

    Георгий прошу выкладывать подобные видео. Очень интересно и для новичков вроде меня очень и очень полезно. Однозначный лайк подписка и колокольчик :)

  • @user-xb4zd7hm1o
    @user-xb4zd7hm1o2 жыл бұрын

    Спасибо. Делайте больше таких видео

  • @alejandro-bcn
    @alejandro-bcn5 жыл бұрын

    Очень понравилось, продолжайте делать такие видосы!

  • @PACEMAKER76
    @PACEMAKER762 жыл бұрын

    Отличное видео! Я еще добавил в класс sidebar border-radius: 15px; box-shadow: 5px 5px 10px 10px rgb(64, 62, 62); Теперь меню выглядит еще лучше :)

  • @sleepyowl8094
    @sleepyowl80945 жыл бұрын

    Обязательно продолжай, довольно полезно)

  • @oleggmyrya157
    @oleggmyrya1575 жыл бұрын

    Делай еще такие видео. Очень круто.

  • @MrSam-mh7ec
    @MrSam-mh7ec4 жыл бұрын

    Гоша, спасибо тебе, ты лучший, удачи

  • @user-wt7jj9bw7l
    @user-wt7jj9bw7l5 жыл бұрын

    Очень классно.Продолжай в том же духе.

  • @x4manchx4manch19
    @x4manchx4manch195 жыл бұрын

    Круте відео, все коротко і ясно, обов'язково продовжуй знімати такі класні ролики.

  • @ArturBerkut
    @ArturBerkut5 жыл бұрын

    Спасибо, давай еще

  • @GURUFORSLIP
    @GURUFORSLIP3 жыл бұрын

    Спасибо. Просто и доступно.

  • @yuliyavolnaya2981
    @yuliyavolnaya29812 жыл бұрын

    Отличное видео! Побольше бы такого контента!

  • @dragosamurai6375
    @dragosamurai63755 жыл бұрын

    Всегда сначала ставлю лайк, потом смотрю видео)

  • @satin66637
    @satin666375 жыл бұрын

    Большое спасибо за урок)))

  • @night_777_rider
    @night_777_rider3 жыл бұрын

    Спасибо, Георгий

  • @tes6776
    @tes67765 жыл бұрын

    годнота, конечно стоит)

  • @topskills1569
    @topskills15692 жыл бұрын

    Спасибо! Супер!

  • @konstantindemidchik5078
    @konstantindemidchik50785 жыл бұрын

    Больше таких видюшек

  • @davvoprod.851
    @davvoprod.8515 жыл бұрын

    Однозначно годно!

  • @hackzet5134
    @hackzet51342 жыл бұрын

    Ваще топ объснение Мне оч понравилось спасибо Гоша

  • @Rivrabobra
    @Rivrabobra3 жыл бұрын

    Молодец. Спасибо)

  • @magicmanguster
    @magicmanguster3 жыл бұрын

    Лучший, просто лучший! Лайкос

  • @user-si6kw3cz4l
    @user-si6kw3cz4l2 жыл бұрын

    Отлично.Сделай еще

  • @user-gy3rm9hf7m
    @user-gy3rm9hf7m4 жыл бұрын

    От души спасибо класс

  • @user-fw9vy8ji1r
    @user-fw9vy8ji1r5 жыл бұрын

    Спасибо!!!

  • @fourty2344
    @fourty23443 жыл бұрын

    Красава, из всех гайдов только твой сработал, век тебе счастья! С меня лайк и коммент!

  • @ZeroX640
    @ZeroX6402 жыл бұрын

    Спасибо!

  • @user-zl8uc3oq5k
    @user-zl8uc3oq5k5 жыл бұрын

    Конечно делай)

  • @Zego92
    @Zego925 жыл бұрын

    Очень круто Хотелось бы чего то специфического по jQuery не шаблонного

  • @beeprodaction9601
    @beeprodaction9601 Жыл бұрын

    да!!! именно супер

  • @maksworldwebboy1119
    @maksworldwebboy11193 жыл бұрын

    Неплохой урок для новеньких

  • @user-rm3ly4qd7k
    @user-rm3ly4qd7k5 жыл бұрын

    Спасибо очень помог продолжай дальше и не закидай.А уроки по CSharp будут?

  • @halynache3116
    @halynache31165 жыл бұрын

    Красавчик, толково и понятно. Делается за 20 минут. До этого делал меню только через css. Теперь буду творить только так) а минусы у этого способа есть?

  • @VadimGam
    @VadimGam4 жыл бұрын

    Благодарность

  • @lenasmirnova6231
    @lenasmirnova62313 жыл бұрын

    IT Сударь!

  • @zihipe521
    @zihipe5214 жыл бұрын

    У меня возникла проблема с меню, оно не выезжало, у кого также, просто поменяйте id = "sidebar" на class = "sidebar" в css тоже всё меняем с # на точку и в javascript вместо document.getElementById("sidebar").classList.toggle('active'); меняем на document.querySelector(".sidebar").classList.toggle('active'); и всё заработает, сам смотрел коменты и ничего не нашёл пришлось самому искать решение, после подумал поделиться с теми у кого также.

  • @SmikeEr

    @SmikeEr

    4 жыл бұрын

    Воспользовался твоим советом, меню начало выдвигаться, но всеравно неправильно. Нажимаю на кнопку(в этот момент меню открывается), отпускаю клик на мышке и меню сразу задвигается назад, тоесть меню не фиксируется при нажатии на кнопку. Не подскажешь как сделать правильно?

  • @dastannasirdinov5660

    @dastannasirdinov5660

    4 жыл бұрын

    я разобрался

  • @dastannasirdinov5660

    @dastannasirdinov5660

    4 жыл бұрын

    @@SmikeEr вобщем вместо getElement используешь queryselector("#sidebar"). У него .sidebar

  • @user-vi8vu1rf6x
    @user-vi8vu1rf6x Жыл бұрын

    Спасибо, хоть увидел, что делает этот 'Жаба Скрипт'

  • @xandrey5857
    @xandrey58573 жыл бұрын

    казалось сложнее чем я думал)

  • @vandl1109
    @vandl11094 жыл бұрын

    Спасибо

  • @constantine8928
    @constantine89285 жыл бұрын

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

  • @veliashev
    @veliashev Жыл бұрын

    Как только я нажал на ссылку на этом видео сразу появился лайк. Видимо, это судьба...

  • @pyrog3071
    @pyrog3071 Жыл бұрын

    Конечно делать!

  • @pyrog3071

    @pyrog3071

    Жыл бұрын

    Thank you very much!

  • @user-rm3ly4qd7k
    @user-rm3ly4qd7k5 жыл бұрын

    Кто хочет стать програмистом лайк!

  • @esadam3761

    @esadam3761

    5 жыл бұрын

    Destroyer я хочу

  • @migrantlaruz5025
    @migrantlaruz50252 жыл бұрын

    Ты круто братан

  • @Sexy4erru
    @Sexy4erru5 жыл бұрын

    Дружище сделай пожалуйста побольше видосов про Unreal Engine 4. Как игру в жанре RPG сделать, прокачку скилов персонажа, апгрейд чего-либо например оружия или предметов. И где можно брать контент. Буду очень благодарен. Так как мало видео на русском про Unreal Engine 4. Ты понятно и лучше всех обьясняешь функции движка и за что та функция блупринтов отвечает. Ответь пжлст когда можно ждать свежих роликов по моей теме?)

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko4 жыл бұрын

    КРАСОТА! Спасибо! Сходу лайк и подписка! Бомбезный урок, сделал на одном дыхании! =)

  • @Anatoliy1790
    @Anatoliy1790 Жыл бұрын

    Супер

  • @dextinter5353
    @dextinter53533 жыл бұрын

    спс

  • @user-ku8bj7rd3b
    @user-ku8bj7rd3b5 жыл бұрын

    Мощный....

  • @xstrlght
    @xstrlght5 жыл бұрын

    Было бы интересно посмотреть больше видео о верстке сайтов

  • @user-ek1dm2on1v
    @user-ek1dm2on1v5 жыл бұрын

    так смешно на это смотреть когда уже умеешь это делать, и закончил обучение на таком уровне))) но все равно спасибо!!!

  • @frelansy-school
    @frelansy-school2 жыл бұрын

    Доброго вечера. Вопрос. Как связать меню с формой игры на джава? Где можно найти такой мануал. Уроки очень интересные и доступные. Спасибо

  • @comet4551
    @comet45515 жыл бұрын

    Сделай ещё видосы по юнити

  • @mmm....5850
    @mmm....58503 жыл бұрын

    Я, который думал что скрипт займёт большую чать видео

  • @fnfoff
    @fnfoff2 жыл бұрын

    Здравствуйте, при нажатии на то чтобы открыть меню у меня оно не открывается.Что делать? Вот код Js: function openMenu() { document.getElementById("sidebar").classList.toggle('active'); }

  • @Raptor-uy8qv
    @Raptor-uy8qv Жыл бұрын

    👍

  • @baget-info
    @baget-info4 жыл бұрын

    Как с помощью js сделать так, чтобы меню скрывалось при нажатии в другое место (не на меню)?

  • @user-wk8ox8ur2o
    @user-wk8ox8ur2o5 жыл бұрын

    А можно видео с исчезновением кнопки во время активного меню?

  • @letovsk1y
    @letovsk1y5 жыл бұрын

    Сделай видео, как создать приложение вконтакте на IFrame или Java

  • @pavelherber3739
    @pavelherber37395 жыл бұрын

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

  • @ornavi8796
    @ornavi8796 Жыл бұрын

    Сделай, пожалуйста график гантта с горизонтальным скроллбаром, который будет бегать по датам. И повесь на него событие пересечения. Вот это было бы реально круто) потому что событие пересечения реализовать вообще хрен пойми как(

  • @k0mar12
    @k0mar125 жыл бұрын

    Гоша Дударь - это как в свой время Евгений Попов, этого человека нужно знать для, чтоб не делать как он

  • @redeyes4884
    @redeyes48843 жыл бұрын

    Делать!

  • @TinTaBraSS777
    @TinTaBraSS7775 жыл бұрын

    Чуваки суперпрограмисты ) я уже задавал вопрос повторю его ещё раз как написать скрипт который бы заходил на другой сайт скачивал в переменную текстовую нужную интернет страницу далее выбрасывал из текста ненужное передавал нужное в другую переменную и сохранял на всегда а не только когда сайт в браузере включен переменную с тем текстом на файле сервера так что бы при следующем заходе на страницу та переменнвя выводилась на страницу не соединяясь с тем сервером больше !?

  • @BolshoiHomak
    @BolshoiHomak3 жыл бұрын

    Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню. Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery. Что мы делаем дальше? Дальше нам надо отловить клик по нашему "бутерброду" и после клика, собственно, и выдвинуть менюху. Как это делается: $(document).ready(function() { $("#menu").click(function() { $(this).addClass("show"); }); }); У меня получилось только так qna.habr.com/q/172409

  • @user-tl3hf2sg4o
    @user-tl3hf2sg4o2 жыл бұрын

    Вот такая классика, один в один повторил и нифига не работает ) как сложно быть криворуким, даже когда повторяешь один в один

  • @dragonwordyt7374
    @dragonwordyt73745 жыл бұрын

    Как зделать графику,анимацию движения,физику,меню интерфейса? Зделай видео уроки по теме создания игрового движка пожалуйста.

  • @TheAgrifon

    @TheAgrifon

    4 жыл бұрын

    Найс рофлишь.

  • @user-ek2ib4zq6x
    @user-ek2ib4zq6x3 жыл бұрын

    Извините но у меня не работает всё как в ролике и не хочет работать

  • @genjuca6407
    @genjuca64073 жыл бұрын

    top

  • @qurannet7687
    @qurannet76875 жыл бұрын

    покажи как работать с slide js

  • @moneshsuzerain
    @moneshsuzerain5 жыл бұрын

    как сделать так чтоб это меню появлялось когда только на телефоне смотришь через @media сделать а другое меню тогда как отключить или его тоже через привезать к медиа ?

  • @awenn2015

    @awenn2015

    5 жыл бұрын

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

  • @kewno8782
    @kewno87825 жыл бұрын

    Почему ничего кроме #sidebar не работает?

  • @user-ld2cl4uo3o
    @user-ld2cl4uo3o3 жыл бұрын

    я просто за ним не успеваю ...

  • @Roman-cp7im
    @Roman-cp7im Жыл бұрын

    Если у кого не высвечивается кнопка,то нужно просто поставить пробел между точкой и sidebar у меня получилось,долго думал в чем проблема

  • @ares5935
    @ares59355 жыл бұрын

    Делай

  • @renatt4673
    @renatt46734 жыл бұрын

    Жаль, что ссылку на код не оставил. Списал, как у тебя и .css не работает

  • @user-go2kq1ix1r

    @user-go2kq1ix1r

    4 жыл бұрын

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

  • @user-we2vh3hs3d

    @user-we2vh3hs3d

    3 жыл бұрын

    может css не подключил?

  • @dmitryvarnavskikh5648

    @dmitryvarnavskikh5648

    3 жыл бұрын

    Возможно кэш, из-за него часто css не обновляется в браузере. ctrl + shift + R - очистить кэш страницы. Часто с этим сталкиваюсь.

  • @nkd..

    @nkd..

    3 жыл бұрын

    @@dmitryvarnavskikh5648 у меня javascript неработает как это?

  • @lil_peepka
    @lil_peepka5 жыл бұрын

    #гошамытебялюбим

  • @user-vx8oy8vh3g
    @user-vx8oy8vh3g3 жыл бұрын

    Что делать, если меню не через id а через секцию?

  • @user-wt7co1bj9p
    @user-wt7co1bj9p2 жыл бұрын

  • @user-vv7oc3cv1h
    @user-vv7oc3cv1h3 жыл бұрын

    А как с правой стороны такой меню сделать? , я хотел сделать , но там появляется скролХ

  • @subV3rt1337
    @subV3rt13373 жыл бұрын

    почему у меня не сдвинулась влево кнопка влево?

  • @dogvscatfunny9956
    @dogvscatfunny99562 жыл бұрын

    Ну так понятно чуть

  • @kumpliko
    @kumpliko5 жыл бұрын

    Да

  • @Porcko12
    @Porcko122 жыл бұрын

    а почему в CSS класс прописывается через # а не .

  • @hlebyek1197
    @hlebyek1197 Жыл бұрын

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

  • @seeCools
    @seeCools3 жыл бұрын

    Скиньте все строки поз

  • @fryze190
    @fryze1904 жыл бұрын

    у меня не получаеться я написал а пишет function openMenu() { document.getElementById("sidebar").classlist.toggle('active'); } что то с toggle я не понимаю я все сделал как вы сделали помогите пожалуйста!

  • @das-turpal6592

    @das-turpal6592

    3 жыл бұрын

    classList може нужен вместо маленькой буквы.

  • @justlook3765
    @justlook37654 жыл бұрын

    Press F

  • @user-ey5wk4um6o
    @user-ey5wk4um6o Жыл бұрын

    повторяю за тобой html не читает некоторые коды в css

  • @Erufea
    @Erufea2 жыл бұрын

    Помогите ребят, не работает function openMenu{ document.querySelector(".sidebar").classList.toggle('active'); } Очень нужна эта кнопка

  • @super_pc1702

    @super_pc1702

    2 жыл бұрын

    разобрался?

  • @relaxman3066
    @relaxman30662 жыл бұрын

    Не работает. Показывает меню только если зажать левую кнопку мышки

  • @user-vp6vz9tf4w
    @user-vp6vz9tf4w2 жыл бұрын

    Не работает

  • @snifix5797
    @snifix57974 жыл бұрын

    можна сам скрипт пж

Келесі