JS - практика#12. Dropdown menu. Много выпадающих списков на чистом JS.
Рет қаралды 14,847
2 жыл бұрынИсходники: clck.ru/YFfQW
Плейлист для практики JS: clck.ru/VwLid
Плейлист для практики верстки: clck.ru/UzwEy
Телеграм канал: t.me/vftuijgd
QIWI Кошелек: qiwi.com/n/DARYR422
#js#javascript#dropdown#выпадающееменю
@icerussia 2 жыл бұрын
Спасибо, добрый человек. Пол дня искал толковое рабочее решение.
@luli72 2 жыл бұрын
прошу тебя не останавливайся! больше ванильного JS практикум , разного.. твои видео лучше всех !!
@skillblog-web 2 жыл бұрын
Хорошо, спасибо за мотивацию🙂
@mreldik6179 4 ай бұрын
Спасибо тебе огромное!!! Мне было необходимо сделать выподашку на чистом js. без использования фреймворков. Перечитал множество форумов, в большинстве случаев использовали либо jquery либо инфа была неактуальной.
@user-fs3vk5qe3l 10 ай бұрын
Отличное видео, все что нужно для работы с выпадающим окном. Автору спасибо.
@MisKaktus 11 ай бұрын
Очень понравилось видео! Доступно все объяснил и показал, я смогла реализовать это в своем проекте для портфолио❤ Большое спасибо за такой классный урок
@yakuznecov 2 жыл бұрын
Спасибо за просто отличный ролик, успехов каналу
@skillblog-web 2 жыл бұрын
Спасибо🙃
@arthurgritsishin3164 2 жыл бұрын
Спасибо за видео, отлично сделал, респект и лайк за труд!
@user-fp4tn1gd9b 2 жыл бұрын
Спасибо большое за объяснения!
@user-mn2fb3ri8z 2 жыл бұрын
Неплохое видео. Недавно начал изучать js, более менее изучил основы и решил приступить к практике. Наткнулся на тебя, очень хорошо объясняешь. Советую продолжать. Спасибо за урок)) Хотелось бы ещё, чтобы ты показал, как сделать так, чтобы они выпадали плавно. А так всё оке, добра тебе :)
@skillblog-web 2 жыл бұрын
Спасибо.☺️ Обязательно покажу, как можно это реализовать. Там по сути несколько строчек CSS нужно)
@vvhoAreU Жыл бұрын
Вместо дисплей блока opacity и visibility hidden с транзишном и все
@user-mn2fb3ri8z Жыл бұрын
@@vvhoAreU вовремя ты ответил кнш). Но все равно спасибо, пхах
@vvhoAreU Жыл бұрын
@@user-mn2fb3ri8z ) как всегда вовремя
@therelaxingsound6903 9 ай бұрын
Спасибо! Как раз этот функционал я искала! Только мне вертикальное нужно.
@user-ff3lc1et3u 2 жыл бұрын
чтобы было плавно, нужно меню не скрывать на display: none: , а скрыть opacity: 0; visibility: hidden; и добавить transition
@skillblog-web 2 жыл бұрын
👍
@fedorich1191 2 ай бұрын
Дэни, Начну с того, что скажу большое спасибо за твои видео ! Никого не слушай, и шли лесом "добрых" и "сверх умных" критиков! Нормальный человек, тактично бы намекнул на ошибки, или какие то недочеты, а не лил бы га...но, как многие это делают. Таке ощущение, что ты кого то заставляешь смотреть свои видео и делать именно так как ты пишешь. Или продал дорогой курс и не рассказываешь про каждую запятую, от куда она и для чего ... Что за народ ... К сожалению живем среди этих ... Еще раз спасибо и успехов в твоем деле !
@skillblog-web 2 ай бұрын
Спасибо!
@user-ff3lc1et3u 2 жыл бұрын
Вообще четкий ролик. Хорошее объяснение. Молодец
@skillblog-web 2 жыл бұрын
👌😉
@rostislove1482 2 жыл бұрын
спасибо, мужик. Единственное, что помогло
@naphania2 Жыл бұрын
мне нравится идея, лайкос!
@user-vv7ic5pr9d Жыл бұрын
Спасибо...для новичка сложно....сохранила)
@user-ds9jt2st9g 2 жыл бұрын
красавчик, не зря тупил))) помог очень сильно. лайк. подписка
@skillblog-web 2 жыл бұрын
🤓
@user-ds9jt2st9g 2 жыл бұрын
@@skillblog-web подскажи как добавить клас к примеру 'active' для самой кнопки, по которой происходит клик.
@vss1288 Жыл бұрын
Спасибо! Учу html и хотел как раз сделать такое меню, но пока к джава скрипту не приступал учиться и не охото перепрыгивать с одних уроков на другие , но никак не мог найти нормального примера Все по полочкам разложил
@rydozoloto77 2 жыл бұрын
МЕГА мозг💥
@kuzay56 Жыл бұрын
лайк!
@Tema_ilit Жыл бұрын
очень крутой видос, делаю проект, учусь на разработчика, нужно сделать очень кастомный выпадающий список, сейчас пойду пробовать, позже отпишусь, что вышло в итоге
@vss1288 Жыл бұрын
Бро , подскажи пож-ста, у меня есть такая задача: Сделал такое выпадающее меню, можно ли сделать чтобы при нажатии на определенную ссылку из меню , менялся путь в ? Т.е на этой же странице html у меня справа встроен . Чтобы подгружался по каждой кнопке в меню свой файл, в айфрейме путь к файлу (я docx сохраняю как html и прописываю к нему путь) . Надеюсь понятно изложил ! Реально ли с помощью js менять путь к файлу в самом теге html в целом ? Спасибо!
@skillblog-web Жыл бұрын
Привет, конечно, это вполне осуществимо)
@vss1288 Жыл бұрын
@@skillblog-web Привет еще раз!) Слушай, сорри что я вопросами дедосю немного ) А не подскажешь, я вот вроде реализовал всё что хотел (список такой и по каждой выпадающей вкладке свой тянется, такая ситация теперь: У меня есть кнопка в html , которая открывает получается outlook (мой клиент по умолчанию) . Можно ли вытягивать содержание текста из и закидывать в боди письма с сохранением шаблона ? Т.е чтобы не просто вытянулся текст и одной строкой перенёсся , а как сохранил свой docx в html и подтянул его через , такой форма и подтянулась. Все файлы локально в одной папке находятся Если невозможно с помощью js это сделать, подскажи пож-ста, куда копать , если знаешь ? Спасибо!
@maxbilanych327 2 жыл бұрын
виручив, в мене вертілось в голові використання setTimeout)))
@wvnnvcry2168 Жыл бұрын
клево, но как выбранный элемент добавить?? чтобы при выборе одного из элементов списка, список закрывался, а выбранный элемент оставался
@skillblog-web Жыл бұрын
Не совсем понял вопрос. Где должен оставаться выбранный элемент?
@user-qp7ph5df7x 2 жыл бұрын
спасибо большое , а возможно сделать что б когда я взаимодействую с чем то в выпадающем элементе он не закрывался
@skillblog-web 2 жыл бұрын
Да, это несложно. Нужно включить нужный вам элемент в условие при нажатии на window. Как по аналогии с блоком меню и самой кнопкой.🙂
@arthurq7843 Жыл бұрын
Это называется select. Drop-down menu срабатывает при наведении курсора
@familybigdream1057 Жыл бұрын
Просто отличное видео!!! Доступно и по полочкам👍Но вот никак не могу сделать так, чтобы стрелка, при выпадании меню, крутилась. ПОМОГИТЕ!!!))))
@skillblog-web Жыл бұрын
Ты имеешь ввиду прокрутку?
@familybigdream1057 Жыл бұрын
@@skillblog-web Да. чтоб эта стрелка в момент выпадания меню прокручивалась на 180deg. Думаю это делается через псевдоэлемент after, но не могу пока понять как.
@skillblog-web Жыл бұрын
@@familybigdream1057 Нужно в момент открытия класс для нее добавить, чтоб повернулась
@familybigdream1057 Жыл бұрын
@@skillblog-web Спасибо!!!😃👍
@Tema_ilit Жыл бұрын
Привет еще раз, у меня новая проблема, когда нажимаешь на кнопку нужно , чтобы стрелка разворачивалась на 180 градусов, можно ли как то прописать в js функцию, которая могла бы обрабатывать все кнопки? у меня просто на сайте 6 списков, через querySelectorAll не работает, а через querySelector работает только одна
@skillblog-web Жыл бұрын
Привет. Можно при нажатии на каждую кнопку обращаться к стрелке, которая к в ней находится и добавлять ей класс active
@Tema_ilit Жыл бұрын
@@skillblog-web можешь пожалуйста прописать код? Не совсем понимаю, у меня стрелка через svg вставлена в кнопку
@Tema_ilit Жыл бұрын
Или могли бы списаться в где-то, любой мессенджер, если есть время конечно, был бы благодарен очень
@skillblog-web Жыл бұрын
@@Tema_ilit вот тг чат для вопросов и общения t.me/skillblog1
@user-lb1mg7ov6j Жыл бұрын
не понимаю зачем тут cleartimeout ? поясни подробнее плз а то не доходит
@soko9005 Жыл бұрын
Очень полезное видео, но все равно не могу до конца понять зачем этот setTimeOut. Я понял только принцип работы, но не могу понять этот момент с setTimeOut и clearTimeout();
@vladyslavpovalii2250 Жыл бұрын
привет. Как сделал для выделения фиолетовое поле?
@skillblog-web Жыл бұрын
Привет, какое поле?😅
@AntonioBenderas Жыл бұрын
Это можно юзать как кастомный select?
@skillblog-web Жыл бұрын
Да, почему нет. Нужно просто доделать, чтобы текст выбранного пункта меню подставлялся в кнопку, что-то вроде того
@user-pb1zu5wz9r Жыл бұрын
ссылка на исходник не работает
@Krassster Жыл бұрын
Чет ты напридумывал лишнего, это ведь через toggle в 2 раза короче можно сделать
@user-gf1gf4fk2i Жыл бұрын
Последний кусок кода не срабатывает, если кликать в пустое пространство.
@skillblog-web Жыл бұрын
В видео срабатывает, а у тебе нет?
@fromglass_ru Жыл бұрын
скопировал исходники по указанной ссылке, выпадающее меню не срабатывает, проверьте их
@skillblog-web Жыл бұрын
Благодарю! Я все проверил, вроде работает 🤔
@veadev Жыл бұрын
Давно такого говнокода здесь не видел…
@mushnikov35 Жыл бұрын
Слишком много foreach, про делегирование почитай
@skillblog-web Жыл бұрын
Не сказал бы, что 2 foreach это слишком много. Если можно, то было бы интересно посмотреть на твою реализацию при помощи делегирования.
@graly651 5 ай бұрын
очень слабо объясняешь не тот уровень который нужен новичку. В начале ты сказал что делаем без бутстрапа на js в итоге ты в сайт подключил бутстрап. По js - у ты просто пишешь код не объясняя структуру то бишь я пишу и говорю что пишу. Для новичка твой ролик подойдет лишь для того что бы списать твой код, но не понять что и как работает. Если нацелен рассказывать и обучать людей то контент слабый, если цель показать как можно сделать тот или иной шаблон на проекты людей. тогда контент хороший. Новичку не понять как сделать это потом или как дополнить твою работу.
@skillblog-web 5 ай бұрын
Как я сказал в начале ролика, что логика работы меню будет не из бутстрапа, а собственная, так я и сделал. Единственное, что я взял из бутстрапа - это стили и разметку html, чтобы на нее время не тратить, как и сказал. Так что я все сделал как и сказал. Я выложил этот ролик на третий месяц изучения жс, так что для начала думаю норм😁😅
Skill Blog: Веб-разработка
Рет қаралды 8 М.
Tech Care Web
Рет қаралды 114 М.
Coding With Topchiy
Рет қаралды 4,7 М.
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 55 М.
Web Dev Tutorials
Рет қаралды 263 М.