Тёмный

Меню любой вложенности на JavaScript - 30 строк кода 

WebDev с нуля. Канал Алекса Лущенко
Просмотров 24 тыс.
50% 1

⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
👇 Разверни для полной информации
🧑🏻‍💻 Сайт: itgid.info
Курс Методы массивов: itgid.info/course/arraymethod
🤩 Скачать код урока: t.me/itgid_info
Создаем многоуровневое меню JavaScript с любым уровнем вложенности элементов и пишем все это на 30 строк JS кода. Просто, быстро, украшаем.
00:00 Начало видео
01:50 Создаем верстку для вложенных меню
03:15 Оформляем CSS
09:50 Пишем JavaScript код для меню
18:50 Добавляем второй уровень вложенности
24:50 Получаем всех parent вложенного меню
32:50 Тестируем меню любой вложенности
34:40 Добавляем выделение цветом раскрытого меню
Моя рабочая станция:
Processor: AMD Ryzen5 1600 Six-core processor
Video: Asus GeForce GTX 1650 Phoenix 4GB GDDR6
RAM: 16GB
Motheboard: MSI A320M PRO-M2 V2
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB
Power: Chieftec Value APB-400B8 400W Bulk
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D
Box: Gougar MX350 Mesh
Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro
+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB

Опубликовано:

 

3 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 61   
@alexredcross
@alexredcross 2 года назад
Спасибо Александр) прошёл курс год назад) уже 8 месяцев работаю PHP+JS разработчиком) но все равно с радостью смотрю видео и даже добавляю себе что-то новое) продолжайте в том же духе, а ещё было бы неплохо возобновить рубрику "JavaScript решает" с новыми интересными задачами)
@itgid
@itgid 2 года назад
Супер. Я рад за вас
@klubkov
@klubkov 2 года назад
Какое-то легаси)
@stason5864
@stason5864 2 года назад
Единственное видео где так подробно и понятно практикуют... Спасибо огромное!
@alexnoskovarg3844
@alexnoskovarg3844 2 года назад
Молодец, я сам програмлю, но всегда есть что-то новенькое подчеркнуть для себя, век живи, век учись!!!
@Ireile
@Ireile 2 года назад
Доброго времени суток Александр. Как и всегда познавательное видео.
@Alexander-tp6gy
@Alexander-tp6gy 2 года назад
спасибо, очень круто. Не планируете делать подобные небольшие практические проекты на React?
@alexanderalexander7722
@alexanderalexander7722 2 года назад
Большое СПАСИБО! То что нужно. Побольше бы таких уроков.!
@arcadiibabici7655
@arcadiibabici7655 9 месяцев назад
Спасибо огромное, словно фантастика !
@sergey9784
@sergey9784 2 года назад
Спасибо. Как всегда доходчиво и понятно!!!
@fordragon9978
@fordragon9978 2 года назад
Как же вы хороши Александр, спасибо вам большое за урок. я пока новичок в этом деле но очень интересно
@BrestSouth
@BrestSouth Год назад
Отличный пример, очень понравилось.
@beuef1379
@beuef1379 2 года назад
Отлично, фантастика, спасибо!!!
@kuzinpeter3365
@kuzinpeter3365 2 года назад
спасибо, за хороший урок
@user-bg3hu1oz4y
@user-bg3hu1oz4y Год назад
Спасибо за урок)
@davidsulaberidze5978
@davidsulaberidze5978 2 года назад
Большое спасибо
@o_opedro4044
@o_opedro4044 2 года назад
Как всегда. 👍 Круто...
@geroin6294
@geroin6294 2 года назад
супер!
@dennisfisher2684
@dennisfisher2684 2 года назад
Александр, огромное спасибо за этот ролик! У меня к вам просьба - пожалуйста, запишите видео, научите, как сделать выпадающее меню на js, только при событии мыши, а не клик. Типа аналог hover. Заранее, спасибо! )
@user-bg3hu1oz4y
@user-bg3hu1oz4y Год назад
Для этого есть css
@annalipower4830
@annalipower4830 2 года назад
30 строк кода, попытаемся уместиться в 50 строк, в итоге 26 строк
@itgid
@itgid 2 года назад
Никогда не знаешь что будет в конце. У самурая нет цели. Только путь
@galatavitaliy
@galatavitaliy 2 года назад
Хотелось бы еще и реализацию мобильного вида меню.
@Alex-dc2jq
@Alex-dc2jq 2 года назад
интересное видео! а как сделать так чтобы подменю не сбоку откривалось а внизу и нижние элеметы сдвигались вниз?
@Juice544_
@Juice544_ 2 года назад
можно такую менюшку и без js реализовать, чисто css и чекбоксы)
@Ireile
@Ireile 2 года назад
Александр в самом начале видео говорит это.
@schprundel2939
@schprundel2939 2 года назад
чекбоксы на многоуровневом как? будет эффект памяти же - в пункте N дошел по иерархии в 5 уровень вложенности. потом перешел на другой главный пункт и вернулся назад на пункт N-откроется весь прошлый путь вложенности. да и html будет раздуваться. чекбоксы хорошо на 1 уровне вложенности - нажал, показалось вложенное. нажал другой, показалось его вложение
@user-st2yl3rr1n
@user-st2yl3rr1n 2 года назад
А если просто проверять есть ли дочерний элемент ul? Если есть то не закрывать родительский элемент
@xKUMAxMU
@xKUMAxMU Год назад
пробовал foreach работает и не с масивами а с элементами тоже, прямо с айтемом можно работать
@vadonfit9269
@vadonfit9269 2 года назад
цсс, в остальном класс
@masterng56
@masterng56 2 года назад
ссылка на исходники ведет просто в Телеграм канал, где я ни чего не нашел ((
@romanenkoonline
@romanenkoonline 2 года назад
Неплохо бы ещё закрыть меню по клику вне блока с навигацией.
@shertskoff6852
@shertskoff6852 2 года назад
Пойду потренируюсь работать с parent и child. еще про console.dir узнал. Только не понятно, что он по названию тега закрывает? Это же не уникальный элемент
@user-dv9fk1hd3s
@user-dv9fk1hd3s 2 года назад
17:50 для коллекции, полученной с помощью querySelectorAll прекрасно работает метод forEach без преобразования в массив с помощью Array.from
@vladyslavvin
@vladyslavvin 2 года назад
Можно и 1 строкой без js li:hover > ul
@schprundel2939
@schprundel2939 2 года назад
можно. только тут человек обучает использованию js на примере
@NanNan-nb4qf
@NanNan-nb4qf Год назад
Вот через пятьсот лет попробуй найди исходный код по очень удобной ссылке. Проще на луну слетать, чем этот код найти.
@ob7349
@ob7349 Год назад
А як зробити, щоб при натисканні на лінк, я перенаправилась в потрібну секцію, а меню закрилось ?
@ob5804
@ob5804 Год назад
Ви сказали, що до subMenu forEach застосувати не зможемо,, бо це не масив, а як би виглядив, в нашому випадку, масив??
@user-jw1uw8rj1z
@user-jw1uw8rj1z 2 года назад
Олександре, дякую за роз'яснення. Є питання - ви весь час клікаєте по Sub, в яких є вкладене меню. Але якщо клікнути по Link - нічого не відбувається, в консолі отримую null. Як вирішити цей момент? Дякую.
@MrFeleven11
@MrFeleven11 Год назад
Меня больше смущает тот факт что я уже 2 месяца ищу способ написать чит меню и даже этот тутор мне не помог
@yannp3358
@yannp3358 2 года назад
Удачи это садаптивить в 30 строк кода лол))
@gorillsezh3703
@gorillsezh3703 2 года назад
И чо там адаптивить,это ж выпадашка бургера, как стилизовал как надо и все
@antonbeletsky1277
@antonbeletsky1277 Год назад
. item{ display : none; } nav:hover item{ display : block; /* flex */ } и не надо js
Далее
Адаптивный слайдер на JavaScript
23:24
Просто о promise в JavaScript
12:52
Просмотров 132 тыс.