Уроки JavaScript Практика #4 Пишем выпадающее меню
HTML-код
- Опубликовано: 12 дек 2016
- В этом уроке мы напишем самое примитивное выпадающее меню, но которе поможет разобрать все нюансы разработки в javascript.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/xPnZE9
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
Мой заработок на RUclips - ►goo.gl/C8Jzpv
вообще-то уважающий себя мужчина должен построить дерево, вырастить дом и посадить сына)))
Как вариант:
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";
}
}
Надеюсь кому то помог.
Спасибо огромное!😊
Красава реально
Ролику уже 6 лет и тем не менее хочу сказать вам искреннее спасибо. Если бы не такие люди, как вы, то было бы значительно сложнее обустроеться в IT из-за перенасыщенности рынка. А так, благодаря вам, необходимо иметь качество, которая присущи далеко не каждому, а именно завидное терпение, а также, нейронные сети, не позволяющие мозгу сгореть от перенасыщенности сложно перевариваемой информации.
Меня как новичка сбивает с толку когда объявляют переменные с таким же именем как и свойство и тд. Вот например объявили переменную target, а далее event.target в этом случае что делает? и можно ли поменять event на x, или event.target (таргет на х) ? или это специальные зарезервированные слова, как alert и тд?
да можно
event.target отслеживает где находиться курсор, как-то так
привыкаешь)) let tg = event.target;
многие кто учит так делает. ппц сбивает с толку
Большое спасибо за очередной урок!
слишком быстро и непонято (
s[0].style.display = 'block'
Это же по идее будет всегда раскрывать первое submenu, не важно наведем мы левое и правое, или я что-то не понимаю?
можешь пожалуйста объяснить document.getElementById('nav').onmouseover = function(event),
в каких случаях мы ставим event
парень продолжай!!!
Конечно!
@@SuprunAlexey о чем вы? смысл от этих выпадающих меню если они показывают один и тот-же контент
Это, только попрактиковаться, с выборами селекторов, с перебором массива, с работой логики данного меню. Вся эта схема работает в три строчки через CSS, что еще более нативнее, чем JS. Я имею ввиду через .class:hover. А если нужна задержка, то через property cubic-bezier мы можем настроить скрытие по своему желанию. А так лайк за труд))
Class.hover это при наведении, а как сделать чтобы было active для одной из 5 кнопок и это могло меняться. Можно как то через css или в данном случае только js?
Видео о том как сделать нерабочее выпадающее меню.
Спасибо за уроки очень помоголи 😁
подскажите неуку если будет более одного подменю
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';
}
}
}
выводит только одно подменю подскажите что делаю не так
Спасибо за урок. Не все пока что понятно, буду разбираться. Код прописал и прикрепил в комменте.
Как понял код срабатывает при 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';
}
}
Семантика на сегодня понимает и можно не оборачивать в div
Спасибо за урок, один вопрос как срабатывает function(event)? где берется события?
здраствуйте, ответ нашли?) я только приступил к практике и тоже интересно)
@@jimhawkins2483 он не рандомно так аргумент в функии назвал, ивент это как бы встроенная функция внутри addeventlistener
@@jimhawkins2483 и с этим ивентом можно работать, например event.preventDefault() запрещает странице перезагружатся если это необходимо
@@user-po1ez6ke6m спасибо за ответ, не скажу что стало намного ясней, но я покопаю)
Вы пишете для мыши, соответственно для тачскринов код бесполезен. Сейчас можно для десктопов, ноутов использовать hover, а код js писать для тачскринов, где hover не работает.
Дякую за цікаве відео!
Странно, очень странно реализовано. Я вижу это во вложенном списке, к элементам которого добавляется класс "hover" при наведении. По крайней мере на olx и розетке именно такая реализация.
Это не самый простой способ, это максимально усложнённый способ
Всё можно сделать проще с помощью CSS:
.submenu { display: none; }
.menu-item:hover .submenu { dispaly: block; }
Всего лишь две строчки кода CSS
Я вам говорил о практике Js и о понимании примитивных действий, так же умении их воспроизводить.
суть не сделать как проще, а понять логику на JS
так не работоет что значет .menu-item:hover .submenu
.submenu { display: none; } .menu-item:hover .submenu { dispaly: block; } hover сам это выполняеться действие при наведении то есть при наведении на submenu выпадет блок потому что в .submenu он скрыт, а в hover.submenu написано что это есть блочным элементом значит при наведении будет показываться блочный елемент то есть видимым
откуда интересно такие умники лезут??? автор упомянул о том, что это не лучший способ как минимум 2 раза.
Объясните пожалуйста, почему именно s[0](после функции closeMenu() )
s[0].style.display="inline-block";
У меня та же проблема, при наведении на menu-item всегда появляется только первое submenu, естественно при подмене s[1] будет видно второе submenu. Это понятно, что число в массиве, но у автора работается все адекватно
Всё круто и понятно очень. Без лишнего. Одного не понимаю для чего внутри функции closeMenu() получать переменную menu ведь она не используется вроде как. Буду благодарна за пояснение ))
переменная меню вообще не нужна здесь. в строгом режиме данный код не будет работать, если не убрать эту строчку
единственное непонятно это console.log(event.target);
но без него подменю не исчезает и вроде как можно заменить на
window.onload = function() {closemenu();}
Не работает( Ни код автора, ни коды из комментов.
Хорошее видео, есть один момент: Если крепить скрипт в head'е, работать не будет (в отличии от предыдущих уроков). Решается переносом в body. Обращаю на это внимание, т.к. сам споткнулся.
Правильно, т.к. к моменту загрузки скрипта в head`е, страницы(body) ещё не существовало
defer в помощь || window.onload = () => {}
Спасибо Вам.
спасибо тебе добрый человек!
Зачем нужна переменная menu в функции closeMenu? Я не вижу чтобы она где-то понадобилась?
У меня 1 вопрос event в функции function(event) это простое название или это специальный аргумент ?
Разобрался?)
@@user-lr2sw2zi2r ага)
а про то что не работает, очень много подобных уроков в ютюбе, все повторил а код не работает ...
Чтобы функция работала корректно ее необходимо обернуть в обработчик события 'DOMContentLoaded', потому что она использует метод getElementById для доступа к элементу с идентификатором 'nav'. Этот метод возвращает элемент только после того, как DOM-структура документа была полностью построена, что происходит при событии 'DOMContentLoaded". То-есть в
window.addEventListener('DOMContentLoaded', function() {
}, true);
По вашему мнению, материалы по javascript 2016 года, являются еще актуальны ? (хочу начать учить)
@Alex Lastname спасибо за ответ
@@vip51000 ответ не видно, что за ответ?
@@artemkatr9483 ответ был удален, но по-моему да
Дэбажить код алертами :D Дада помню как "алертировал" чуть ли не каждую строку) Потом левел-апнулся и начал использовать console.log :D
а след лвл использовать nod'у))0
Не пойму,зачем ты в методе closeMenu() создал бесполезнуюю переменную menu,которая не используется ?
потому что код был слизан с другого источника,а видос тупо рекламку вставить
я всё ссделал у меня всё правильно работает как я хотел!!!!))))) спасибо
Не знаю как у него получилось сделать без ошибок. Но вот одного я не понимаю 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";
}
}
Зачем устанавливать блокам меню position ?
Здравствуйте! У меня тут два вопроса: Зачем в первой функции вызываем closeMenu();
И как решить проблему Uncaught TypeError: Cannot set property 'onmouseover' of null
Что б была возможность закрыть меню.
Решить проблему очень просто - правильно переписать код!
Web Developer Blog Здравствуйте, не до конца понял строчку: var target = event.target - для чего она нужна? Изучаю практику и теорию параллельно, чтобы запомнить так сказать..
Web Developer Blog Разобрался с этим вопрос снят
А если он в жопу правильно переписан и всё равно сук ни*уя не работает, что дальше?
Уже работает, извини, но это просто не может быть ошибкой, проблема была даже не в js файле...
Я конечно понимаю, что это практика по Js, но блин, два закрывающихся Дива в ряд, этож не читабельно нефига. уже представляю, как подобное будет выглядеть в каком нить длинном лендинге, когда тебе надо будет вынести кусок кода, за пределы одного из контейнеров. Аж мурашки по спине пошли.
Ужас
Казнить 😇
@@SuprunAlexey это как читать код, в котором все закидано this'ами. Воде коротко, вроде все даже хорошо работает, но что там происходит, даже разработчик на следующий день не скажет.
как это в ссылки сделать там код придёться как то менять помогите!!!!
Впервые с первого раза!
У меня у одного оно вообще не работает? Я даже его даа раза переписал и проверил но код все равно не работает
Но все же спасибо за урок
Тож самое
а ты случайно не забыл подключить js файл в Html коде?
Тоже не работает,js к html подключила,проверила два раза все без толку😥
Вы наверное js фаил к HTML НЕ подключили
@@artomka8632 все подключено, код перепроверила, но что-то не работает(
Если такой простой список, то куда проще просто использовать css и псевдокласс Hover.
Спасибо за урок! В function closeMenu() для чего переменная menu? Лишняя строка в коде...
Спасибо!
Точно! Я тоже это подметил!
Ладошка с пальцем:D
Есть теги nav ul li a почему бы не использовать их?)
відео 2016 року)І перемінна let замість var теж частіше використвується)
Что значит строчка кода for (var i =0; i
ну там ж есть три елемента с класом "submenu", а этот цикл их просто по очереди перебирает и если ты работаешь с несколькими елементами, то так ты говоришь функции: "там есть короче елемент i (обьявил), но он там не один поэтому ты давай ка перебери их всех до момента i
Когда создаешь переменные, давай им читабельный имена, а не просто "s".
Вроде не особо грешил таким
Смысл в том что бы писать читабельный код, а не просто написать код который будет работать. Показывай правильный пример, другие буду учиться от тебя. Я даже на самом начальном уровне, и то понимаю что переменную надо называть относительно того что она определяет. Рассмотри мое предложение.
Конечно - конечно
ошибаетесь, важным переменным да нужно, но есть такое понятие как технические переменные, которые долго не живут и в которые вообще лучше не лезть, кроме того на первом этапе написания кода готовится рабочий код, а вот на последующих а-ля оптимизация, рефакторинг и т.п. код начинает вылизываться и тогда переменным и дают осмысленные названия.
У меня одного при обновлении, блоки submenu отображаются и после ввода курсора мыши на экран изчезают и далее все работает как надо??
Я добавил :
window.onload= function(){
Var s = document.getElementsByClassName('submenu');
for( var i=0; i
у всех) но тебе одному не похрен)))) и мне)
и кстати чтобы от этого избавиться достаточно в начале кода прописать closeMenu()
код выравнивается в DOM ctrl a + crtl +k+f
не понял строку кода s[0].style.display='block'. Что такое 'block' и для чего s[0]?
А теперь понимаешь?)
Давайте напишем пятнашки на javvascript!
Ну вообще норм, но только тебе надо больше говорить что ты пишешь
минус в том когда забираешь курсор я меню другой класс пропадает
второй минус что это можнj делать даже лучше на чистом css
Да, можно. Я сам так раньше делала, только так много css кода получается, а смысл этого видео-урока в обучение основ js. И он в начале сказал же, что это не идеальный пример
у меня при обновлении страницы, видно все submenu когда мышь веду ниже кнопки обновить там где начинается страница они пропадают и начинают работать как надо
Перепишете все верно, где то могли ошибиться
У меня та же ситуация. Вы нашли в чем проблема?
не нашол((
я знаю ребята как вам помочь тут дело в css .menu-item .submenu{display:none;} допишите
Реализовал на 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();
});
}
как вы одновременно пишете на нескольких строках?
Выбираешь строки с зажатым Alt
Нет, это самый непростой способ. Просто сделать на css!!! Сделать список, поставить его в строчку, потом написать стили, немного html в начали и всё...
Это практика JavaScript что бы научится использовать Js
Очень интересно но ничего не понятно)
Нуууууу, ладно как для понимания сойдет, но не все так тут гладко. Рекомендую найти другой ролик. Зашел, посмотреть как раз что сделаю за 10минут видео. Класть на css, но к js вопросики
Uncaught TypeError: Cannot set property 'onmouseover' of null
at main.js:1
Посмотрите код у меня
та же проблема, проверил уже каждую букву кода пару раз, все сходиться но ошыбку выдает(((
@@oleksandrkostyuk9696 забей! у меня также (по коду все верно)
@@artemgavryushin4693 понял в чем беда? у меня так же
Почему браузер ругается на "onmouseover"?
И у меня, объясните почему
дайте ссылку на скачивание, или текст отправьте
Держи. Первые 4 урока
drive.google.com/open?id=0B5Uq7Wct5YVBNFRaWm9ySEdQc0k
emmet рулит .nav>.item-menu*4>.submenu
Согласен
Не работает почему то 😢 Уже который урок подряд не работает!!!
Доработанный мною код! Реагирует на клик!
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');
}
}
Почему у меня "TARGET" не светится
Дебажить код alert-ами)) Начинающий программист, вы имели ввиду? Самому-то не надоедает эти окошки мышкой закрывать? Познакомили бы уже с console.log.
Новичкам так проще, они сразу видят действие, до консоли позже доходит)
div, div,div....ссылка-див, список -див все див
как ты продублировал строку 3 раза?
Sublime text творит чудеса
Установи Emmet для Sublime Text и посмотри урок о нем. На RUclips много о нем сказано.
Замени "onmouseover" на "onclick"
Бля, легче на чистом CSS написать.
Вы правы, однако и это знать тоже нужно, не всё же Вы будете писать на чистом HTML + CSS.
@@RollbackToStart подобную хрень лучше и не знать. Одноуровневое меню, открывающее при ховере очень легко реализуется без скрипта. Это дичь делать такую анимацию при помощи JS.
качество кода оставляет желать лучшего)) где то стоят ' ' одинарные, где то " ' двойные, знак = так же где то с пробелами, где то без.. вообще рандомно, просто ппц чувак, ну да ладно, главное показал как работает и то хорошо))
Идеалу нет предела
Главное код работает!
Ну а двойные или одинарные кавычки - это можно самому регулировать!
Молодец парень - там держать!
Paco, ты вообще вездесущ, и в тематических группах ВК тебя постоянно вижу и под видосами.
Всем привет, данный код я написал на локальном сервере в Sublime Text 3 ничего не работает, но когда поместил в JSFiddle( jsfiddle.net/8oLg63bm/ ) всё заработало
Вопрос ПОЧЕМУ?
могу подсказать как бесплатно скачать phpstorm, webstorm)
Со студенческим
@@SuprunAlexey неа
Легальным способом?
@@SuprunAlexey к сожалению пиратский(новый версии без вирусов и т.д.). Ну я очень доволен. Правда немного заморачиваться надо когда устанавливаеш ну могу помочь если будут вопросы/проблемы
Что за прога?
sublime text?
помимо того что вы не объяснили что к чему еще и ошибки во всю жаль что таким как мы приходится натыкаться на таких как вы и впустую тратить время ,,,,,,,,,,
Нет ошибок
@@SuprunAlexey , здравствуйте ! Интересно у вас учится! Но вот первый раз применил что то на практике и не получается! Подскажите как найти ошибку! вот страница моя :
Делаю появляющиеся значки иконок под моделями обуви!
Alexandrgentlmen.github.io
@@SuprunAlexey , еще не понятно почему в моем примере сразу же начинает при любом движении срабатывать код добавления display:none ! хотя я даже до блока с id еще не направил мышь
сейчас бы меню из дивов делать.....
чувак 2016 год,тогда это было нормально
@@mirommefumimasa33, конечно. JS только в 2015 появился!
сейчас можно в ксс3 забабахать это меню
да и тогда можно было, суть же в самом процессе
Такие вещи лучше на css писать
Почему у меня не работает ничего ?
Потому что неправильно написал
@@SuprunAlexey Всё правильно!
Реклама каждые 2 минуты задалбывает !!! Х_Х
невозможно смотреть видео, и так в каждом видео =/
А вы ее закрывайте и не парьтесь
так вот и напрягает каждые 2 минуты закрывать! то всплывающие, то реклама включается
addd block поставь
Антон М, а ты клавиатуру новую купи, либо английский язык изучи
А какие к автору претензии? Ютуб делает рекламу, не автор
Что за редактор?
А у меня тож такой же)
как называется?
Sublime Text 3
Но 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
ClassName с маленькой надо)
ES6? Не, не слышал.
Бл* спасибо, конечно, за урок, НО РЕКЛАМЫ ТО КУЛИ ТАК МНОГО НАПИХАЛ??))
что это за ошибка ? yadi.sk/i/LM6l534t2iDy8w
Я пробовал убирать кавычки, не фурычит
У меня не открывает Яндекс, на телефоне нет впн, позже гляну. Почитайте коменты, тут многие ошибки описаны
ниче не понятно
толком не объяснил ни чего.....смысл от этого видео по копирку списать....хреновый с тебя преподаватель
Работаем
@@SuprunAlexey надеюсь)
Скачал код с какого то форума и тупо перезаписал на камеру и называешь это видеуроком 😲😲😲
Народ, кто "по-глазастее", в чём разница(первый скрипт не работает, а второй работает).
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 ?.
Потому что submenu идет после menu item, вы когда наводите на menu item у вас появляется submenu.