Уроки JavaScript Практика #4 Пишем выпадающее меню 

Ролику уже 6 лет и тем не менее хочу сказать вам искреннее спасибо. Если бы не такие люди, как вы, то было бы значительно сложнее обустроеться в IT из-за перенасыщенности рынка. А так, благодаря вам, необходимо иметь качество, которая присущи далеко не каждому, а именно завидное терпение, а также, нейронные сети, не позволяющие мозгу сгореть от перенасыщенности сложно перевариваемой информации.

Меня как новичка сбивает с толку когда объявляют переменные с таким же именем как и свойство и тд. Вот например объявили переменную target, а далее event.target в этом случае что делает? и можно ли поменять event на x, или event.target (таргет на х) ? или это специальные зарезервированные слова, как alert и тд?

вообще-то уважающий себя мужчина должен построить дерево, вырастить дом и посадить сына)))

Большое спасибо за очередной урок!

Как вариант: HTML: Menu1 SubMenu1 Menu2 SubMenu1 CSS: .SubMenu { visibility : collapse; z-index: 1; height : 0px; border: 2px solid black; width : 0px; left: 60px; top: -20px; background-color : burlywood; position: relative; } .Menu { z-index: 0; height: 20px; width: 100px; border: 2px solid black; background-color: burlywood; margin: 5px; text-align: center; vertical-align: central; padding: 4px; } ul { list-style-type: none; } JS: function ShowSubMenu(element) { for (var i = 0; i < element.children.item(0).childElementCount; i++) { var obj = element.children[0].children[i]; obj.style.height = "20px"; obj.style.width = "100px"; obj.style.visibility = "visible"; } } function HideSubMenu(element) { for (var i = 0; i < element.children.item(0).childElementCount; i++) { var obj = element.children[0].children[i]; obj.style.height = "0px"; obj.style.width = "0px"; obj.style.visibility = "collapse"; } } Надеюсь кому то помог.

парень продолжай!!!

можешь пожалуйста объяснить document.getElementById('nav').onmouseover = function(event), в каких случаях мы ставим event

слишком быстро и непонято (

Спасибо за уроки очень помоголи 😁

Дякую за цікаве відео!

s[0].style.display = 'block' Это же по идее будет всегда раскрывать первое submenu, не важно наведем мы левое и правое, или я что-то не понимаю?

Видео о том как сделать нерабочее выпадающее меню.

подскажите неуку если будет более одного подменю var target = event.target; if(target.className == 'menu-item'){ var s = target.getElementsByClassName('submenu'); closeMenu(); for(var i = 0; i < s.length; i++){ console.log(s); s[i].style.display = 'block'; } } } выводит только одно подменю подскажите что делаю не так

Спасибо за урок, один вопрос как срабатывает function(event)? где берется события?

Это, только попрактиковаться, с выборами селекторов, с перебором массива, с работой логики данного меню. Вся эта схема работает в три строчки через CSS, что еще более нативнее, чем JS. Я имею ввиду через .class:hover. А если нужна задержка, то через property cubic-bezier мы можем настроить скрытие по своему желанию. А так лайк за труд))

Объясните пожалуйста, почему именно s[0](после функции closeMenu() ) s[0].style.display="inline-block";

я всё ссделал у меня всё правильно работает как я хотел!!!!))))) спасибо

Хорошее видео, есть один момент: Если крепить скрипт в head'е, работать не будет (в отличии от предыдущих уроков). Решается переносом в body. Обращаю на это внимание, т.к. сам споткнулся.

Не работает( Ни код автора, ни коды из комментов.

единственное непонятно это console.log(event.target); но без него подменю не исчезает и вроде как можно заменить на window.onload = function() {closemenu();}

Вы пишете для мыши, соответственно для тачскринов код бесполезен. Сейчас можно для десктопов, ноутов использовать hover, а код js писать для тачскринов, где hover не работает.

Впервые с первого раза!

как это в ссылки сделать там код придёться как то менять помогите!!!!

Странно, очень странно реализовано. Я вижу это во вложенном списке, к элементам которого добавляется класс "hover" при наведении. По крайней мере на olx и розетке именно такая реализация.

Всё круто и понятно очень. Без лишнего. Одного не понимаю для чего внутри функции closeMenu() получать переменную menu ведь она не используется вроде как. Буду благодарна за пояснение ))

Когда создаешь переменные, давай им читабельный имена, а не просто "s".

Не пойму,зачем ты в методе closeMenu() создал бесполезнуюю переменную menu,которая не используется ?

Дэбажить код алертами :D Дада помню как "алертировал" чуть ли не каждую строку) Потом левел-апнулся и начал использовать console.log :D

Зачем нужна переменная menu в функции closeMenu? Я не вижу чтобы она где-то понадобилась?

Семантика на сегодня понимает и можно не оборачивать в div

Зачем устанавливать блокам меню position ?

Спасибо за урок! В function closeMenu() для чего переменная menu? Лишняя строка в коде...

а про то что не работает, очень много подобных уроков в ютюбе, все повторил а код не работает ...

По вашему мнению, материалы по javascript 2016 года, являются еще актуальны ? (хочу начать учить)

У меня 1 вопрос event в функции function(event) это простое название или это специальный аргумент ?

Есть теги nav ul li a почему бы не использовать их?)

Спасибо за урок. Не все пока что понятно, буду разбираться. Код прописал и прикрепил в комменте. Как понял код срабатывает при event(движение мыши), определяет на что она наведена. Если это пункт меню, то открывается подменю, а все остальные подменю закрываются. Это все работает пока указатель находится на полях меню и подменю. document.getElementById("nav").onmouseover = function(event) { var target = event.target; if (target.className == "menu-item") { var s = target.getElementsByClassName("submenu"); closeMenu(); s[0].style.display='block'; } } document.onmouseover=function(event) { var target = event.target; console.log(event.target); if (target.className != 'menu-item' && target.className != 'submenu' ){ closeMenu(); } } function closeMenu() { var menu = document.getElementById('nav'); var subm = document.getElementsByClassName("submenu") for (var i=0; i < subm.length; i++) { subm[i].style.display = 'none'; } }

Ладошка с пальцем:D

Не знаю как у него получилось сделать без ошибок. Но вот одного я не понимаю document.getElementById("nav").onmouseover = function(event){ var target = event.target; if( target.className == 'menu-item' ){ var m = document.getElementsByClassName("menu-item"); var s = document.getElementsByClassName("submenu"); closeMenu(); s[0].style.display = "block"; //Здесь если будет так, то он будет первый элемент открывать. А если так: "for ( var i = 0; i < m.length; i++){ if (m[i] == target) { s[i].style.display = "block"; }", то куда на вел там и открывает. Как в видео. } } } document.onmouseover = function(event){ var target = event.target; console.log(event.target); if( target.className != 'menu-item' && target.className != 'submenu'){ closeMenu(); } } function closeMenu(){ var subm = document.getElementsByClassName("submenu"); for( var i = 0; i < subm.length; i++){ subm[i].style.display = "none"; } }

Что значит строчка кода for (var i =0; i

У меня у одного оно вообще не работает? Я даже его даа раза переписал и проверил но код все равно не работает Но все же спасибо за урок

Ну вообще норм, но только тебе надо больше говорить что ты пишешь

У меня одного при обновлении, блоки submenu отображаются и после ввода курсора мыши на экран изчезают и далее все работает как надо?? Я добавил : window.onload= function(){ Var s = document.getElementsByClassName('submenu'); for( var i=0; i

Здравствуйте! У меня тут два вопроса: Зачем в первой функции вызываем closeMenu(); И как решить проблему Uncaught TypeError: Cannot set property 'onmouseover' of null

как вы одновременно пишете на нескольких строках?

у меня при обновлении страницы, видно все submenu когда мышь веду ниже кнопки обновить там где начинается страница они пропадают и начинают работать как надо

Если такой простой список, то куда проще просто использовать css и псевдокласс Hover.

не понял строку кода s[0].style.display='block'. Что такое 'block' и для чего s[0]?

Почему у меня "TARGET" не светится

Почему браузер ругается на "onmouseover"?

код выравнивается в DOM ctrl a + crtl +k+f

Давайте напишем пятнашки на javvascript!

Uncaught TypeError: Cannot set property 'onmouseover' of null at main.js:1

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

Я конечно понимаю, что это практика по Js, но блин, два закрывающихся Дива в ряд, этож не читабельно нефига. уже представляю, как подобное будет выглядеть в каком нить длинном лендинге, когда тебе надо будет вынести кусок кода, за пределы одного из контейнеров. Аж мурашки по спине пошли.

Дебажить код alert-ами)) Начинающий программист, вы имели ввиду? Самому-то не надоедает эти окошки мышкой закрывать? Познакомили бы уже с console.log.

Не работает почему то 😢 Уже который урок подряд не работает!!!

Очень интересно но ничего не понятно)

Нуууууу, ладно как для понимания сойдет, но не все так тут гладко. Рекомендую найти другой ролик. Зашел, посмотреть как раз что сделаю за 10минут видео. Класть на css, но к js вопросики

emmet рулит .nav>.item-menu*4>.submenu

Реализовал на Jquery, работает точно так же, кто может подскажите, что можно убрать или добавить ;) $('.menu-item').mouseover(function(event){ let target = event.target; let s = target.getElementsByClassName('submenu'); closeBlock(); $(s).show(); }); $(document).mouseover(function(event){ let target = event.target; if (target.className == 'menu-item' || target.className == 'submenu') { $(target).show(); } }); function closeBlock(){ $('.menu-item').mouseout(function(){ $('.submenu').hide(); }); }

Бля, легче на чистом CSS написать.

Это не самый простой способ, это максимально усложнённый способ Всё можно сделать проще с помощью CSS: .submenu { display: none; } .menu-item:hover .submenu { dispaly: block; } Всего лишь две строчки кода CSS

как ты продублировал строку 3 раза?

Нет, это самый непростой способ. Просто сделать на css!!! Сделать список, поставить его в строчку, потом написать стили, немного html в начали и всё...

Чтобы функция работала корректно ее необходимо обернуть в обработчик события 'DOMContentLoaded', потому что она использует метод getElementById для доступа к элементу с идентификатором 'nav'. Этот метод возвращает элемент только после того, как DOM-структура документа была полностью построена, что происходит при событии 'DOMContentLoaded". То-есть в window.addEventListener('DOMContentLoaded', function() { }, true);

сейчас бы меню из дивов делать.....

Доработанный мною код! Реагирует на клик! document.getElementById('nav').onclick = function(event) { var s = event.target.getElementsByClassName('submenu'); var target = event.target; if (s[0].classList == 'submenu active'){ s[0].classList.remove('active'); } else if (target.className == 'menu-item') { closeMenu(); s[0].classList.add('active'); console.log(target.className) } }; document.onclick = function(event){ var target = event.target; if(target.className != 'menu-item' && target.className != 'submenu active'){ closeMenu(); } }; function closeMenu(){ var subm = document.getElementsByClassName('submenu'); for(var i = 0; i < subm.length; i++){ subm[i].classList.remove('active'); } }

качество кода оставляет желать лучшего)) где то стоят ' ' одинарные, где то " ' двойные, знак = так же где то с пробелами, где то без.. вообще рандомно, просто ппц чувак, ну да ладно, главное показал как работает и то хорошо))

Всем привет, данный код я написал на локальном сервере в Sublime Text 3 ничего не работает, но когда поместил в JSFiddle( jsfiddle.net/8oLg63bm/ ) всё заработало Вопрос ПОЧЕМУ?

div, div,div....ссылка-див, список -див все див

Замени "onmouseover" на "onclick"

Что за прога?

могу подсказать как бесплатно скачать phpstorm, webstorm)

сейчас можно в ксс3 забабахать это меню

помимо того что вы не объяснили что к чему еще и ошибки во всю жаль что таким как мы приходится натыкаться на таких как вы и впустую тратить время ,,,,,,,,,,

Почему у меня не работает ничего ?

Такие вещи лучше на css писать

Что за редактор?

Бл* спасибо, конечно, за урок, НО РЕКЛАМЫ ТО КУЛИ ТАК МНОГО НАПИХАЛ??))

Реклама каждые 2 минуты задалбывает !!! Х_Х невозможно смотреть видео, и так в каждом видео =/

Но JS не пашет -----------------------------------------------------------------------------JS------------------------------------------------------------------------------------------------------------------------- document.getElementById('nav').onmouseover = function(event){ var target = event.target; if(target.ClassName == 'menu-item'){ var s = target.getElementsByClassName('submenu'); closeMenu(); s[0].style.display='block'; } } document.getElementById('nav').onmouseover = function(event){ var target = event.target; console.log(event.target); if(target.ClassName !== 'menu-item' && target.className!='submenu'){ closeMenu(); } } function closeMenu(){ var menu = document.getElementById('nav'); var subm = document.getElementsByClassName('submenu'); for(var i =0;i

ES6? Не, не слышал.

что это за ошибка ? yadi.sk/i/LM6l534t2iDy8w

ниче не понятно

толком не объяснил ни чего.....смысл от этого видео по копирку списать....хреновый с тебя преподаватель

Скачал код с какого то форума и тупо перезаписал на камеру и называешь это видеуроком 😲😲😲

Народ, кто "по-глазастее", в чём разница(первый скрипт не работает, а второй работает). 1. document.getElementById('nav').onmouseover = function(event) { var target = event.target; if (target.className == 'menu-item') { var s = target.getElementsByClassName('summenu'); closeMenu(); s[0].style.display='block'; } } document.onmouseover = function(event) { var target = event.target; console.log(event.target); if (target.className != 'menu-item' && target.className != 'summenu') { closeMenu(); } } function closeMenu() { var menu = document.getElementById('nav'); var subm = document.getElementsByClassName('summenu'); for (var i = 0; i < subm.length; i++) { subm[i].style.display="none"; } } 2. document.getElementById('nav').onmouseover = function(event) { var target = event.target; if (target.className == 'menu-item') { var s = target.getElementsByClassName('submenu'); closeMenu(); s[0].style.display = 'block'; } } document.onmouseover = function(event) { var target = event.target; console.log(event.target); if (target.className != 'menu-item' && target.className != 'submenu') { closeMenu(); } } function closeMenu() { var menu = document.getElementById('nav'); var subm = document.getElementsByClassName('submenu'); for (var i = 0; i < subm.length; i++) { subm[i].style.display = "none"; } }

Зачем в .submenu писать свойство cursor: pointer, если оно и так наследуется от родительского элемента?

Почему сласс .munu-item добавлен впереди .submenu ?.