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

Поділитися
Вставка
  • Опубліковано 20 гру 2024

КОМЕНТАРІ •

  • @valerijstudent552
    @valerijstudent552 4 роки тому +13

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

  • @sergeialfyorov9954
    @sergeialfyorov9954 6 років тому +62

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

  • @os743
    @os743 2 роки тому +1

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

  • @DrovosekTv
    @DrovosekTv 6 років тому +2

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

  • @ПавелРумянцев-й5п
    @ПавелРумянцев-й5п 3 роки тому +1

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

  • @PACEMAKER76
    @PACEMAKER76 2 роки тому +1

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

  • @SkelerStrike
    @SkelerStrike 6 років тому +2

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

  • @qtshades
    @qtshades 5 років тому +1

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

  • @paradox-player
    @paradox-player 6 років тому

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

  • @kilomaziec
    @kilomaziec 3 роки тому

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

  • @oleggmyrya157
    @oleggmyrya157 6 років тому +1

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

  • @dragosamurai6375
    @dragosamurai6375 5 років тому +1

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

  • @alejandro-bcn
    @alejandro-bcn 6 років тому +1

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

  • @GURUFORSLIP
    @GURUFORSLIP 3 роки тому +1

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

  • @night_777_rider
    @night_777_rider 4 роки тому +1

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

  • @konstantindemidchik5078
    @konstantindemidchik5078 6 років тому +2

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

  • @MrSam-mh7ec
    @MrSam-mh7ec 5 років тому +1

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

  • @topskills1569
    @topskills1569 3 роки тому +1

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

  • @hackzet5134
    @hackzet5134 2 роки тому

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

  • @fourty2344
    @fourty2344 3 роки тому +1

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

  • @x4manchx4manch19
    @x4manchx4manch19 6 років тому

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

  • @magicmanguster
    @magicmanguster 3 роки тому

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

  • @эляАбдуллова-к4с
    @эляАбдуллова-к4с 6 років тому +1

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

  • @zihipe521
    @zihipe521 5 років тому +9

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

    • @SmikeEr
      @SmikeEr 5 років тому +1

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

    • @dastannasirdinov5660
      @dastannasirdinov5660 4 роки тому

      я разобрался

    • @dastannasirdinov5660
      @dastannasirdinov5660 4 роки тому +1

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

  • @fnfoff
    @fnfoff 3 роки тому +2

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

  • @sleepyowl8094
    @sleepyowl8094 6 років тому +1

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

  • @yuliyavolnaya2981
    @yuliyavolnaya2981 3 роки тому

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

  • @Naratix
    @Naratix 2 роки тому

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

  • @Rivrabobra
    @Rivrabobra 4 роки тому +1

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

  • @tes6776
    @tes6776 6 років тому +1

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

  • @ГлебКуба
    @ГлебКуба 3 роки тому

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

  • @baget-info
    @baget-info 5 років тому +2

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

  • @xandrey5857
    @xandrey5857 3 роки тому +1

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

  • @constantine8928
    @constantine8928 6 років тому +3

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

  • @frelansy-school
    @frelansy-school 2 роки тому

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

  • @halynache3116
    @halynache3116 6 років тому +1

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

  • @maksworldwebboy1119
    @maksworldwebboy1119 3 роки тому

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

  • @ArturBerkut
    @ArturBerkut 6 років тому +3

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

  • @БехрузАбдувалиев-н5и
    @БехрузАбдувалиев-н5и 5 років тому +1

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

  • @Zego92
    @Zego92 6 років тому +1

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

  • @lenasmirnova6231
    @lenasmirnova6231 3 роки тому

    IT Сударь!

  • @satin66637
    @satin66637 5 років тому

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

  • @veliashev
    @veliashev Рік тому

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

  • @МусаевКенжебек
    @МусаевКенжебек 3 роки тому +3

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

  • @kewno8782
    @kewno8782 6 років тому +2

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

  • @beeprodaction9601
    @beeprodaction9601 Рік тому

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

  • @migrantlaruz5025
    @migrantlaruz5025 2 роки тому

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

  • @hlebyek1197
    @hlebyek1197 2 роки тому +2

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

  • @bruha-k4f
    @bruha-k4f 6 років тому +27

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

    • @esadam3761
      @esadam3761 6 років тому +1

      Destroyer я хочу

  • @pyrog3071
    @pyrog3071 2 роки тому

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

    • @pyrog3071
      @pyrog3071 2 роки тому

      Thank you very much!

  • @СергейЕртушов-ь1ы
    @СергейЕртушов-ь1ы 6 років тому +1

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

  • @Град-ь2щ
    @Град-ь2щ 6 років тому

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

  • @bruha-k4f
    @bruha-k4f 6 років тому

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

  • @ЕлизаветаМурзикова

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

  • @АртемЯ-щ9е
    @АртемЯ-щ9е 6 років тому

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

  • @TinTaBraSS777
    @TinTaBraSS777 6 років тому +1

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

  • @VadimGam
    @VadimGam 5 років тому +1

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

  • @dragonwordyt7374
    @dragonwordyt7374 6 років тому +6

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

    • @Agrifon
      @Agrifon 4 роки тому

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

  • @renatt4673
    @renatt4673 4 роки тому +5

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

    • @ВладиславЛотарев-т8ц
      @ВладиславЛотарев-т8ц 4 роки тому +3

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

    • @ДаниярМИнашев
      @ДаниярМИнашев 4 роки тому

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

    • @dmitryvarnavskikh5648
      @dmitryvarnavskikh5648 4 роки тому +1

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

    • @nkd..
      @nkd.. 3 роки тому +1

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

  • @pavelherber3739
    @pavelherber3739 6 років тому

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

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 5 років тому

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

  • @subV3rt1337
    @subV3rt1337 3 роки тому

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

  • @владимирдавыдов-у4ц
    @владимирдавыдов-у4ц 5 років тому +1

    Спасибо!!!

  • @Ald1n-w3y
    @Ald1n-w3y 3 роки тому

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

  • @BolshoiHomak
    @BolshoiHomak 4 роки тому

    Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню.

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

  • @moneshsuzerain
    @moneshsuzerain 6 років тому

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

    • @awenn2015
      @awenn2015 6 років тому

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

  • @qurannet7687
    @qurannet7687 5 років тому

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

  • @Porcko12
    @Porcko12 2 роки тому

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

  • @xstrlght
    @xstrlght 6 років тому +1

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

  • @Мимишка-н6р
    @Мимишка-н6р 2 роки тому +2

    Не работает

  • @comet4551
    @comet4551 6 років тому +1

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

  • @dextinter5353
    @dextinter5353 3 роки тому +1

    спс

  • @k0mar12
    @k0mar12 6 років тому

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

  • @mmm....5850
    @mmm....5850 3 роки тому +3

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

  • @letovsk1y
    @letovsk1y 6 років тому

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

  • @ornavi8796
    @ornavi8796 2 роки тому

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

  • @ДмитрийСафин-л9п
    @ДмитрийСафин-л9п 3 роки тому +2

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

  • @Roman-cp7im
    @Roman-cp7im 2 роки тому

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

  • @fryze190
    @fryze190 4 роки тому +2

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

    • @das-turpal6592
      @das-turpal6592 3 роки тому

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

  • @vandl1109
    @vandl1109 5 років тому

    Спасибо

  • @Erufea
    @Erufea 2 роки тому

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

  • @relaxman3066
    @relaxman3066 2 роки тому

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

  • @твоеимя-е6т
    @твоеимя-е6т Рік тому

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

  • @BolshoiHomak
    @BolshoiHomak 4 роки тому +2

    не получилось

    • @BolshoiHomak
      @BolshoiHomak 4 роки тому

      index.html:51 Uncaught TypeError: Cannot read property 'classList' of null
      at openMenu (index.html:51)
      at HTMLDivElement.onclick (VM299 index.html:11)
      openMenu @ index.html:51
      onclick @ VM299 index.html:11

  • @seeCools
    @seeCools 4 роки тому

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

  • @троеточие-о6и
    @троеточие-о6и 2 роки тому

  • @ЕленаНовикова-й2ф
    @ЕленаНовикова-й2ф 6 років тому +1

    Мощный....

  • @iamsabrina2375
    @iamsabrina2375 2 роки тому

    у меня не получилось ((

  • @reguralwhitedude
    @reguralwhitedude 3 роки тому +1

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

  • @redeyes4884
    @redeyes4884 3 роки тому

    Делать!

  • @snifix5797
    @snifix5797 5 років тому

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

  • @levonmartirosyan__
    @levonmartirosyan__ 6 років тому

    👍

  • @TinTaBraSS777
    @TinTaBraSS777 6 років тому

    Что за буква эйчь какая она по счёту в русском алфавите !? )

    • @TinTaBraSS777
      @TinTaBraSS777 6 років тому

      Kofiy а что она делает в русской речи !? )

  • @лилпипка
    @лилпипка 6 років тому +2

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

  • @dogvscatfunny9956
    @dogvscatfunny9956 2 роки тому

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

  • @genjuca6407
    @genjuca6407 4 роки тому

    top

  • @ivanorlov5691
    @ivanorlov5691 6 років тому

    Не не, не надо толку от таких простых вещей я думал там реально будет что то крутое , а там обычное меню которое за 3 мин можно написать , сними видео про что то более сложное про паралакс или канвас.
    Ставлю лайк в надежде что в будущем выйдет действительно что то интересное , а не скрипт который 8-летний ребенок может написать

    • @viktor456
      @viktor456 6 років тому

      А что сложного в паралаксе?

  • @kumpliko
    @kumpliko 6 років тому

    Да

  • @ares5935
    @ares5935 6 років тому

    Делай

  • @justlook3765
    @justlook3765 4 роки тому

    Press F