Создание анимированного меню на 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
какого хрена это так просто?! я думал там миллион строк скрипта будет... спасибо за видио, очень познавательно новичкам
Молодец, Георгий! Умеете давать материал! Всякий раз получаю не только информацию, но и удовольствие от изучения! Спасибо!
Спасибо за урок. Подробно, понятно и доступно. Ждём больше таких уроков.!
Ну так понятно объяснить чайнику такое за 15 минут - это прям талант. Спасибо тебе за это видео! Очень благодарен!
Лучший! Давай больше такого добра!) Предлагаю назвать эту серию видео "Фишки от Дударя"
Молодец чувак. Написал, объяснил, показал. побольше уроков по js!
Да, нужны ещё, очень интересно, серьёзно
Георгий прошу выкладывать подобные видео. Очень интересно и для новичков вроде меня очень и очень полезно. Однозначный лайк подписка и колокольчик :)
Спасибо. Делайте больше таких видео
Очень понравилось, продолжайте делать такие видосы!
Отличное видео! Я еще добавил в класс sidebar border-radius: 15px; box-shadow: 5px 5px 10px 10px rgb(64, 62, 62); Теперь меню выглядит еще лучше :)
Обязательно продолжай, довольно полезно)
Делай еще такие видео. Очень круто.
Гоша, спасибо тебе, ты лучший, удачи
Очень классно.Продолжай в том же духе.
Круте відео, все коротко і ясно, обов'язково продовжуй знімати такі класні ролики.
Спасибо, давай еще
Спасибо. Просто и доступно.
Отличное видео! Побольше бы такого контента!
Всегда сначала ставлю лайк, потом смотрю видео)
Большое спасибо за урок)))
Спасибо, Георгий
годнота, конечно стоит)
Спасибо! Супер!
Больше таких видюшек
Однозначно годно!
Ваще топ объснение Мне оч понравилось спасибо Гоша
Молодец. Спасибо)
Лучший, просто лучший! Лайкос
Отлично.Сделай еще
От души спасибо класс
Спасибо!!!
Красава, из всех гайдов только твой сработал, век тебе счастья! С меня лайк и коммент!
Спасибо!
Конечно делай)
Очень круто Хотелось бы чего то специфического по jQuery не шаблонного
да!!! именно супер
Неплохой урок для новеньких
Спасибо очень помог продолжай дальше и не закидай.А уроки по CSharp будут?
Красавчик, толково и понятно. Делается за 20 минут. До этого делал меню только через css. Теперь буду творить только так) а минусы у этого способа есть?
Благодарность
IT Сударь!
У меня возникла проблема с меню, оно не выезжало, у кого также, просто поменяйте id = "sidebar" на class = "sidebar" в css тоже всё меняем с # на точку и в javascript вместо document.getElementById("sidebar").classList.toggle('active'); меняем на document.querySelector(".sidebar").classList.toggle('active'); и всё заработает, сам смотрел коменты и ничего не нашёл пришлось самому искать решение, после подумал поделиться с теми у кого также.
@SmikeEr
4 жыл бұрын
Воспользовался твоим советом, меню начало выдвигаться, но всеравно неправильно. Нажимаю на кнопку(в этот момент меню открывается), отпускаю клик на мышке и меню сразу задвигается назад, тоесть меню не фиксируется при нажатии на кнопку. Не подскажешь как сделать правильно?
@dastannasirdinov5660
4 жыл бұрын
я разобрался
@dastannasirdinov5660
4 жыл бұрын
@@SmikeEr вобщем вместо getElement используешь queryselector("#sidebar"). У него .sidebar
Спасибо, хоть увидел, что делает этот 'Жаба Скрипт'
казалось сложнее чем я думал)
Спасибо
Гоша, сделай ролик про то, как в таком меню выделить цветом выбранный пункт, то есть ссылку на которой находится пользователь
Как только я нажал на ссылку на этом видео сразу появился лайк. Видимо, это судьба...
Конечно делать!
@pyrog3071
Жыл бұрын
Thank you very much!
Кто хочет стать програмистом лайк!
@esadam3761
5 жыл бұрын
Destroyer я хочу
Ты круто братан
Дружище сделай пожалуйста побольше видосов про Unreal Engine 4. Как игру в жанре RPG сделать, прокачку скилов персонажа, апгрейд чего-либо например оружия или предметов. И где можно брать контент. Буду очень благодарен. Так как мало видео на русском про Unreal Engine 4. Ты понятно и лучше всех обьясняешь функции движка и за что та функция блупринтов отвечает. Ответь пжлст когда можно ждать свежих роликов по моей теме?)
КРАСОТА! Спасибо! Сходу лайк и подписка! Бомбезный урок, сделал на одном дыхании! =)
Супер
спс
Мощный....
Было бы интересно посмотреть больше видео о верстке сайтов
так смешно на это смотреть когда уже умеешь это делать, и закончил обучение на таком уровне))) но все равно спасибо!!!
Доброго вечера. Вопрос. Как связать меню с формой игры на джава? Где можно найти такой мануал. Уроки очень интересные и доступные. Спасибо
Сделай ещё видосы по юнити
Я, который думал что скрипт займёт большую чать видео
Здравствуйте, при нажатии на то чтобы открыть меню у меня оно не открывается.Что делать? Вот код Js: function openMenu() { document.getElementById("sidebar").classList.toggle('active'); }
👍
Как с помощью js сделать так, чтобы меню скрывалось при нажатии в другое место (не на меню)?
А можно видео с исчезновением кнопки во время активного меню?
Сделай видео, как создать приложение вконтакте на IFrame или Java
Привет, запиши видео как сделать плавный скролинг на странице что бы прокрутив вниз экран находился в четких рамках и мог двигаться только по ним и что бы когда прокручиваешь на такую плоскость на ней происходила анимация не могу найти это
Сделай, пожалуйста график гантта с горизонтальным скроллбаром, который будет бегать по датам. И повесь на него событие пересечения. Вот это было бы реально круто) потому что событие пересечения реализовать вообще хрен пойми как(
Гоша Дударь - это как в свой время Евгений Попов, этого человека нужно знать для, чтоб не делать как он
Делать!
Чуваки суперпрограмисты ) я уже задавал вопрос повторю его ещё раз как написать скрипт который бы заходил на другой сайт скачивал в переменную текстовую нужную интернет страницу далее выбрасывал из текста ненужное передавал нужное в другую переменную и сохранял на всегда а не только когда сайт в браузере включен переменную с тем текстом на файле сервера так что бы при следующем заходе на страницу та переменнвя выводилась на страницу не соединяясь с тем сервером больше !?
Для блока слева создай отдельный элемент на странице. Например, div с id "menu". В него помещай все, что тебе нужно. Умеешь подключать JQuery? На всякий случай, объясню. Вот эту строчку впихни в head своей страницы. Теперь у нас подключен JQuery. Что мы делаем дальше? Дальше нам надо отловить клик по нашему "бутерброду" и после клика, собственно, и выдвинуть менюху. Как это делается: $(document).ready(function() { $("#menu").click(function() { $(this).addClass("show"); }); }); У меня получилось только так qna.habr.com/q/172409
Вот такая классика, один в один повторил и нифига не работает ) как сложно быть криворуким, даже когда повторяешь один в один
Как зделать графику,анимацию движения,физику,меню интерфейса? Зделай видео уроки по теме создания игрового движка пожалуйста.
@TheAgrifon
4 жыл бұрын
Найс рофлишь.
Извините но у меня не работает всё как в ролике и не хочет работать
top
покажи как работать с slide js
как сделать так чтоб это меню появлялось когда только на телефоне смотришь через @media сделать а другое меню тогда как отключить или его тоже через привезать к медиа ?
@awenn2015
5 жыл бұрын
Мне кажется что нужно просто эти стили перенести в медиа а для большого экрана написать обычное боковое меню и на техе будет такая вот красивая менюшка, надо будет замутить такую, не думал что так просто , пару строк js и вуаля, нужно учить js))
Почему ничего кроме #sidebar не работает?
я просто за ним не успеваю ...
Если у кого не высвечивается кнопка,то нужно просто поставить пробел между точкой и sidebar у меня получилось,долго думал в чем проблема
Делай
Жаль, что ссылку на код не оставил. Списал, как у тебя и .css не работает
@user-go2kq1ix1r
4 жыл бұрын
не надо писать как у него, это же для примера дано. Пиши по своему а то привыкнешь и не сможешь сам придумывать)))
@user-we2vh3hs3d
3 жыл бұрын
может css не подключил?
@dmitryvarnavskikh5648
3 жыл бұрын
Возможно кэш, из-за него часто css не обновляется в браузере. ctrl + shift + R - очистить кэш страницы. Часто с этим сталкиваюсь.
@nkd..
3 жыл бұрын
@@dmitryvarnavskikh5648 у меня javascript неработает как это?
#гошамытебялюбим
Что делать, если меню не через id а через секцию?
А как с правой стороны такой меню сделать? , я хотел сделать , но там появляется скролХ
почему у меня не сдвинулась влево кнопка влево?
Ну так понятно чуть
Да
а почему в CSS класс прописывается через # а не .
спасибо кончено но у меня не выдвигается в право меню я вроде как всё проверил ошибок нет но всё ровно не работает
Скиньте все строки поз
у меня не получаеться я написал а пишет function openMenu() { document.getElementById("sidebar").classlist.toggle('active'); } что то с toggle я не понимаю я все сделал как вы сделали помогите пожалуйста!
@das-turpal6592
3 жыл бұрын
classList може нужен вместо маленькой буквы.
Press F
повторяю за тобой html не читает некоторые коды в css
Помогите ребят, не работает function openMenu{ document.querySelector(".sidebar").classList.toggle('active'); } Очень нужна эта кнопка
@super_pc1702
2 жыл бұрын
разобрался?
Не работает. Показывает меню только если зажать левую кнопку мышки
Не работает
можна сам скрипт пж