Меню любой вложенности на JavaScript - 30 строк кода
HTML-код
- Опубликовано: 31 май 2024
- ⏰ Курс 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
Спасибо Александр) прошёл курс год назад) уже 8 месяцев работаю PHP+JS разработчиком) но все равно с радостью смотрю видео и даже добавляю себе что-то новое) продолжайте в том же духе, а ещё было бы неплохо возобновить рубрику "JavaScript решает" с новыми интересными задачами)
Супер. Я рад за вас
Большое СПАСИБО! То что нужно. Побольше бы таких уроков.!
Спасибо. Как всегда доходчиво и понятно!!!
Доброго времени суток Александр. Как и всегда познавательное видео.
Отлично, фантастика, спасибо!!!
Отличный пример, очень понравилось.
спасибо, за хороший урок
Спасибо за урок)
Спасибо огромное, словно фантастика !
Единственное видео где так подробно и понятно практикуют... Спасибо огромное!
Большое спасибо
Молодец, я сам програмлю, но всегда есть что-то новенькое подчеркнуть для себя, век живи, век учись!!!
Как всегда. 👍 Круто...
Как же вы хороши Александр, спасибо вам большое за урок. я пока новичок в этом деле но очень интересно
спасибо, очень круто. Не планируете делать подобные небольшие практические проекты на React?
супер!
Какое-то легаси)
Александр, огромное спасибо за этот ролик! У меня к вам просьба - пожалуйста, запишите видео, научите, как сделать выпадающее меню на js, только при событии мыши, а не клик. Типа аналог hover.
Заранее, спасибо! )
Для этого есть css
интересное видео! а как сделать так чтобы подменю не сбоку откривалось а внизу и нижние элеметы сдвигались вниз?
А если просто проверять есть ли дочерний элемент ul? Если есть то не закрывать родительский элемент
Хотелось бы еще и реализацию мобильного вида меню.
30 строк кода, попытаемся уместиться в 50 строк, в итоге 26 строк
Никогда не знаешь что будет в конце. У самурая нет цели. Только путь
Пойду потренируюсь работать с parent и child. еще про console.dir узнал. Только не понятно, что он по названию тега закрывает? Это же не уникальный элемент
ссылка на исходники ведет просто в Телеграм канал, где я ни чего не нашел ((
пробовал foreach работает и не с масивами а с элементами тоже, прямо с айтемом можно работать
можно такую менюшку и без js реализовать, чисто css и чекбоксы)
Александр в самом начале видео говорит это.
чекбоксы на многоуровневом как? будет эффект памяти же - в пункте N дошел по иерархии в 5 уровень вложенности. потом перешел на другой главный пункт и вернулся назад на пункт N-откроется весь прошлый путь вложенности. да и html будет раздуваться.
чекбоксы хорошо на 1 уровне вложенности - нажал, показалось вложенное. нажал другой, показалось его вложение
цсс, в остальном класс
Неплохо бы ещё закрыть меню по клику вне блока с навигацией.
Можно и 1 строкой без js
li:hover > ul
можно. только тут человек обучает использованию js на примере
А як зробити, щоб при натисканні на лінк, я перенаправилась в потрібну секцію, а меню закрилось ?
Вот через пятьсот лет попробуй найди исходный код по очень удобной ссылке. Проще на луну слетать, чем этот код найти.
Олександре, дякую за роз'яснення. Є питання - ви весь час клікаєте по Sub, в яких є вкладене меню. Але якщо клікнути по Link - нічого не відбувається, в консолі отримую null. Як вирішити цей момент? Дякую.
Ви сказали, що до subMenu forEach застосувати не зможемо,, бо це не масив, а як би виглядив, в нашому випадку, масив??
. item{
display : none;
}
nav:hover item{
display : block; /* flex */
}
и не надо js
Меня больше смущает тот факт что я уже 2 месяца ищу способ написать чит меню и даже этот тутор мне не помог
Удачи это садаптивить в 30 строк кода лол))
И чо там адаптивить,это ж выпадашка бургера, как стилизовал как надо и все
17:50 для коллекции, полученной с помощью querySelectorAll прекрасно работает метод forEach без преобразования в массив с помощью Array.from