Учим JavaScript 34. Адаптивное меню

[@Ельдар-в9ш]

Канал реально недооценен. Я учил js на 3 разных каналах и могу точно сказать ,что этот лучший.На первом канале автор рассказал все очень поверхностно и просто оставил источники на которых можно доучиваться,на втором рассказчик заикался и не мог внятно объяснить ,на третьем автор ускорял видео ,просто писал код и явно не хотел ничего объяснять так ,что в итоге я просто переписал код и он не сработал .А здесь очень внятно и четко все рассказывается .

[@itgid]

Полностью с вами согласен!

[@wickedtorpedo75]

Давай я догадаюсь кто они: 1) "Малоизвестный канал" 2) Гоша Дударь 3) Web Developer Blog

[@artimacmac816]

Взахлеб учусь по Ваши урокам + читаю учебник по JS.С каждым часом JS добрее и добрее ко мне)

[@ВладиславБушев]

Кто ты!? Такое понятное объяснение я еще ни где не видел. Спасибо тебе!

[@itgid]

www.linkedin.com/in/%D0%B0%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80-%D0%BB%D1%83%D1%89%D0%B5%D0%BD%D0%BA%D0%BE-15b44942/ Спасибо за отзыв!

[@evergreensun7283]

Вы лучший преподаватель! Вас приятно слушать, здорово и просто объясняете. И клавиатура мас приятно делает бяк бяк

[@saskirakosyan5268]

the best teacher of youtub, only voice is quiet. thank you.

[@МихаилДжекович-л1щ]

Я научился делать адаптивное меню. Спасибо тебе добрый человек!!!

[@itgid]

Спасибо за отзыв. Рад, что помогло!

[@NeedForHeavyMetal]

Учителя = боги! Очень вам благодарен за ваш труд, спасибо.

[@maximzakharov3858]

Да нас немного, но нам нравится то, что Вы делаете. Очень интересные уроки.

[@itgid]

2000 это много!

[@_Fantom_.]

Огромное спасибо за очередной мега-интересный и познавательный урок!

[@broTh3R_io]

Мужик, ты очень доступно, разжевано и понятно объясняешь. Для новичков в самый раз. Я одно понять не могу... Какого черта у тебя всего 91 подписчик ?! Все те кто прочитал этот комент, бегом сабскрайбиться !!!!

[@itgid]

У меня сейчас 1940 подписчиков. ЭТо 94 просмотра. Но с лозунгом согласен :) Тут другое. Если бы я нес какую-то чушь, или бегал голым по улице, у меня было бы под миллион подписчиков. А так - JS не так популярен, как хотелось бы.

[@broTh3R_io]

оууу, утром сонный был тупанул...ахахаха

[@broTh3R_io]

тут я с вами полностью согласен. Но у вас просто прекрасный курс для новичков, где all inclusive!!! А подобных аналогов мало, даже если они есть, то они будут неправильно сформированы, а тут вы всё по полочкам.

[@ДенисДенисов-о2п]

в точку.

[@digitalturkistan1857]

поздравляю всего 9 месяцев назад 1940 подписчиков теперь больше 10 000 . развивайтесь дальше

[@АлексейДубовицкий-ж3ц]

Пожалуйста , сделайте видео про многоуровневое меню на javaScript ! Вы очень доходчиво все объясняете !

[@Ельдар-в9ш]

Все проговаривается ,все внятно .О боже ,не учеба а кайф.

[@makintoj]

Как раз нужен был! Спасибо!

[@КайратМардушев-ф1е]

Огромнейший лайк, очень крутые уроки!!!

[@marinaermilova7912]

Мне очень нравится. Спасибо от всех старушек мира!

[@azubkov007]

Благодарю, всё заработало с первого раза :D

[@_pheax]

круто спасибо, (кто хочет понять и применять на практике, ребята смотрите, учитесь НЕ ПОЖАЛЕЕТЕ)

[@АрстанбекШаршенов-к4т]

спасибо за ваши уроки

[@malygos1898]

Лучшие уроки, лучший учитель!

[@Unknown_User768]

Классно, спасибо. Боюсь JS с каждым днем меньше.

[@fonzadof]

Крутой мужик!

[@ЯрославВлас-б6т]

Просто бомба, если бы еще уроки по PHP били бы

[@AvmanG777]

Просто супер! Автор ты молодец!

[@ИяИя-п2к]

Действительно,очень просто!

[@АндрейЛуцив-ы6о]

огромное спасибо, очень понятно.

[@abdulazizbaiyrbek392]

здраствуй я почти все видеокурсы смотрел ютуба но у тебя самый отличный уроки про джаваскрипт . будет ли курс по php. продолжай в том же духе

[@itgid]

Спасибо. В планах много всего. Главное, чтобы было время.

[@abdulazizbaiyrbek392]

брат я вот смотрю уроки по html css но не знаю счего начать хотелос бы сделать свой первый сайт фотошоп обязателен или просто на листке нарисовать чертеж не даш маленкийй совет за ранее спасибо

[@itgid]

можно и на листке. Причем сделать нужно 5-10 сайтов, пусть кривых, пусть косых, но сделать. А потом брать уже макет и по нем верстать.

[@abdulazizbaiyrbek392]

спасибо большое очень было полезно . а макетта откуда можно брать

[@itgid]

Сейчас добавлю ссылку под видео!

[@Ельдар-в9ш]

Я точно всем друзьям буду рекламировать.

[@victorkas2279]

Отличный урок, как всегда. Вопрос, почему вы не использовали скобки document.querySelector('#menu').onmouseover = menuShow;???()

[@trokay1]

Hi. My dear friend. Дело в том что это не вызов а присвоение функции)

[@blackrockshooter5087]

@@trokay1 спасибо помог)

[@trokay1]

@@blackrockshooter5087 от души)

[@ЮлияБудник-й6ж]

Спасибо!

[@КостянЕрмаков-е9ю]

точно, я вспомнил где это я уже видел, 33 эффекта на CSS, только там без JS. Кстати, Александр, будете ли вы выкладывать вторую часть о эффектах CSS?

[@itgid]

Да буду.

[@КостянЕрмаков-е9ю]

JavaScript решает, это хорошая новость, хоть и знал о многом, но полезного тоже много чего можно на заметку себе взять, спасибо.

[@vladimirjosan6127]

А что насчёт Angular? Вообще будет ли смысл с видеокурса, если уже есть 4 версия?

[@fed4wet]

Ангуляр - это фреймворк. Без понимания как работает JS - понять будет тяжело, если невозможно. И еще, 4 версия, это цифра апдейта, но по сути это второй ангуляр.

[@olehlavryk5902]

Клас можно добавить даже в github gists. Одна проблемка в mobile view нет hover

[@itgid]

тады вешаем клик!

[@yaokouassijean-claude1499]

Супер!)

[@alexeyko3924]

А почему после условия Вы не поставили фигурные скобки? Должно же быть так: if (event.code == 'keyM') { menuShow(); } if (event.code == 'keyEscape') { menuHide(); } Или я что-то неправильно понял?

[@itgid]

Если идёт одно условие то скобки можно не ставить

[@thomasx7764]

Я благодарен. От меня бесплатная реклама твоего канала.

[@hachiko489]

в ie проблемы с e.code == "Escape", советую использовать e.which == '27'

[@СуржикСергей-с4в]

Вопрос новичка.Почему в JS постоянно используют getElementById, а не querySelector, в чём разница или это дело вкуса.

[@ukraine_on_fire526]

А нельзя ли те игры что на Canvase сделать на JavaScripte?

[@webdewep8992]

Возможно ли сделать JS код короче?

[@itgid]

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

[@zaxaso2269]

а как в это меню посестить текст? я пытался через сделать,но у меня не чего не получалось помогите плз!?

[@ХудожникНастоящий]

Написал вот такую хреновину, чтобы меню как вылезало, так и скрывалось при нажатии на M. Почему-то не работает как задумано... document.onkeydown = function(event) { var menuLeft = 0; if (event.code == 'KeyM') { menuShow(); menuLeft = 1; } else if (event.code == 'KeyM' && menuLeft>0) { menuHide(); } }

[@aisultanmukushev7598]

(Сначала объявляем глобальную переменную) var menuLeft = 0; document.onkeydown = function(event){ if (event.code == "KeyM" && menuLeft == 0){ menuLeft = 1; menuShow(); } else if(event.code == "KeyM" && menuLeft == 1){ menuLeft = 0; menuHide(); } }

[@arminemazmanyan5717]

спасибо )))

[@artemaramma2912]

вот мой код : var n=0; document.onkeypress = function(event){ if(n%2==0){ if (event.key =='m'||event.key=='M'){ menushow(); n++; } } else { menufide(); n++; } } n-глобальная переменная. Тут при нажатии клавиши m меню или появляется или исчезает (чуть-чуть понятнее для пользователя);

[@andriysalahub3064]

не працюэ ваш варіант, зупиняється на if на else не переходить через помилку з круглими душками перед else заберіть одну і добавте після другого n++

[@falc0nreeper500]

У меня onmouseover и onmouse over не работает ( я сделал как в инструкции

[@МиколаСвятий]

такая же делема, уже не знаю даже куда стучать, в какие двери за решением

[@СветланаРазумовская-й7л]

У меня к вам два вопроса. 1. Почему querySelector пишется с помощью большой буквы, а onmouseover все с маленькой? 2. Почему в одном месте название функции пишите без скобок, а где if со скобками? Я не понимаю, объясните пожалуйста.

[@hack-cpp]

Вы из-за ошибки решили заменить getElementById?:)

[@itgid]

Я уже не помню где и что заменял.

[@viktorklim8107]

Наконец-то JavaScript, а не jQuery.

[@mariasana9]

Safari не подобається, коли я використовую Escape

[@nabilhasanov7313]

День добрый! Подскажите пожалуйста каким образом я могу скрыть меню нажатием повторной кнопки "M".Буду благодарен за ответ!

[@michailk296]

window.onload = function() { var count = 0; document.querySelector('#menu').onmouseover = showMenu; document.querySelector('#menu').onmouseout = hideMenu; document.onkeydown = function(event) { console.log(event); if (event.code === 'KeyM' && count === 0) { showMenu(); count++ } else if (event.code === 'KeyM' && count === 1) { hideMenu(); count-- } } function showMenu() { document.querySelector('#menu').style.left = 0; } function hideMenu() { document.querySelector('#menu').style.left = '-230px'; } }

[@yippeeki-yey]

У кого хром, и раздел code="" пустой, то вместо используйте charCode == 109

[@Виталий96-к4я]

Cool!!

[@Tube26218]

В моей версии хрома event.code пустой. Почему так происходит? KeyboardEvent { key: "m", code: " " } Версия Chrome 68

[@Tube26218]

РЕШЕНО! Изменил событие .onkeypress на .onkeydown

[@mrnshanyan9615]

👍👍👍

[@ВиталийСлободянюк-х8м]

Вроде как просто, а во сам не могу додуматься до такого. Автор как решить данную проблему?

[@itgid]

Какую именно?

[@ВиталийСлободянюк-х8м]

Как научится кодить у высоком уровне? Как Вы. (мне 18 лет)

[@itgid]

Только практика. И искать сложные задачи и людей которые лучше вас и учится у них.

[@andreinechaev7214]

У меня при нажатии клавиши "m" консоль не показывает code: "KeyM", а только пустые двойные кавычки: KeyboardEvent {isTrusted: true, key: "m", code: "", location: 0, ctrlKey: false, …}

[@andreinechaev7214]

P.S. Когда поменял команду onkeypress на onkeydown стал появляться code: "KeyM"

[@itgid]

используйте key просто!

[@kapotonai]

Не совсем понял,почему вы указали style.left ='-230px' ,а не style.left = -230 +'px';

[@trokay1]

На самом деле можно написать и по 3му варианту '-230' + 'px' (дело в том что это значение принимается как строка. Нам же нужно чтобы корректно браузер "кушал" значение). Надеюсь помог.

[@kapotonai]

Максим Трокай Спасибо. А говорили, что JS один из лучших языков программирования для новичков. По моему мнению, это ни разу не правда.)

[@trokay1]

На самом деле так и есть) Как раз для облегчения это и сделано) Честно, нужно просто привыкнуть. Я вот как раз новичок, прям совсем новичок) Просто некоторые моменты запоминаются)

[@evergreensun7283]

Вы лучший преподаватель! Вас приятно слушать, здорово и просто объясняете. И клавиатура мас приятно делает бяк бяк