Выпадающее МЕНЮ на чистом CSS / HTML

[@denisgorelov3236]

Полезные ссылки к уроку: ► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p ► Уроки по FlexBox - bit.ly/2CYN8lo ► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt

[@ДанилЛитвин-п9ш]

Простите , у меня не выстраивается меню в ряд .Думал дело в display: flex; , но все равно ничего не выходит подскажите пожалуйста .

[@ДанилЛитвин-п9ш]

Спасибо . Я выяснил в чем дело . У меня редактор дает баги . Пишу код- на странице ерунда , потом стираю его переписываю (или копирую и вставляю снова ) и все работает .

[@davidsahakyan8790]

скинь код

[@timanderson324]

В выпадающем меню на пер пой кнопке левая граница толще чем на остальных (вернее она там двойная). Как исправить? pp.userapi.com/c850520/v850520621/5538b/ucuStvsuMWk.jpg

[@timanderson324]

Крч // border у всех элементов поставил одного цвета, а в // .dws-menu > ul li:first-child добавил строку // margin-left: -1px; в // .dws-menu li > ul li ul сделал // right: -153px; вместо 150. Вроде бы мелкие недочеты, но глаза мозолят. Теперь надо в выпадающем списке правую полосу поправить. Она в два раза толще левой. Еще градиент у меня при зуме иногда растаскивает кнопки. Поменял на один цвет. Не нашел как всё это исправить.

[@mishalitvin6359]

Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!

[@mishasv1490]

Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!

[@denisgorelov3236]

Спасибо!

[@Бойправ-ж8ы]

Спасибо, прошло уже 4 года, а видео до сих пор актуально. Удачи.

[@hornyBanAn4ik]

не совсем, сайт с иконами изменился и всё совсем не так как на видео

[@oleksandrharkusha9404]

Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!

[@denisgorelov3236]

Спасибо за комментарий, рад то уроки помогают.

[@dreamer2978]

Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее

[@billyukrop1496]

ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!

[@doskerprovokator7210]

Идеально - кратко, понятно и по сути, качество записи на отлично!

[@НиколайБадулин-у4щ]

Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.

[@KindCat21]

Уровень знаний и подача материала впечатляет. Спасибо!

[@clever_distr]

Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно! Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!

[@uszakow]

Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!

[@kinggiv1]

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

[@alexryzhenkov271]

Так все быстро сказал, что я даже не успел запомнить))) Спасибо большое !! Все супер.

[@Эрмек.Султанов]

Здравствуйте Денис, хочу сказать что у вас очень интересные уроки, буду ждать (НОВЫХ) СПАСИБО :-)

[@filevav]

Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)

[@Muzaffar1987ful]

Спапсибо за урок Денис! респект тебе. очень много в интеренете материалов, но ты обясняешь отлично! спасибо еще раз!

[@it6706]

*Я посмотрел DWS TV многих комментарии лайкает,комментирует.Молодец общается с зрителями.Желаю тебе успехов в дальнейшем!*

[@МаринТолмач]

Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!

[@oleksiirudenko1446]

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

[@bobretsoff]

Обалдеть, а че так можно было да? =) пипец, красавчик, давай еще =)

[@_d_e_a_d_1_d_e_a_d_176]

Денис поставте лайк чтобы я хвалиться перед друзьями! ))) каналу удачи и много много подписчиков

[@alexey6680]

Супер. По поводу адаптации +++. Буду ждать с нетерпением.

[@ВоваМир-э3з]

День второй) Возьмите это и его туда а здесь вот так и этак)) Чёёёёёё. До этого видео я представления не имел о всём что говорит автор) Очень много гуглю, первое меню в моей жизни даётся тяжело. Познания в данной сфере на данный момент -100% )) Но мы не здаёмся, обязательно всё получиться) Всем удачи,не бросайте на пол пути)

[@КириллАндреевич-п8ф]

отличный ролик, приятная музыка, смотрел в 2х кратном ускорении, дикция норм, инфа полезная, всего пару дней как начал лепить первый сайт, комент ради комента говорят за это бонусы дают блогерам

[@paranoia-1994]

Мужик люблю тебя только у тебя нашел выход из проблемы, которая ломала меня 2 недели

[@AlexsashkaSysoev]

Спасибо еще раз за твой труд,буду с нетерпением ждать новые,смотреть и лайкать старые уроки.

[@denisputria2376]

😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl Assssssxxxxxxxc xmcv1waasscc b %

[@ravabat5841]

Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.

[@ДмитроГорбатиков]

Очень понравился background кнопок в конце ролика, надо будет попробовать :)

[@funclub6927]

Всё действительно быстро, и для понимающих людей полезно, мне как новичку немного трудновато так быстро следить за действиями, но думаю розебрусь

[@TauLepton-od3zz]

Посоны, чем "ul li a" от "ul li > a" отличается? И почему не "ul > li > a"?

[@bektendosmambetov938]

Спасибо за уроки, смотрю твои видео и просто наслаждаюсь

[@ShocKKKKKKK]

Если бы ты сделал парочку макетов сайтов у себя на видеоуроках, разбил бы их на штук так 20 и за эти 20 уроков ты бы например запилил 2, 3 сайта разной сложности. От простого и легкого, к более сложному. Вот это было бы интересно, хотя так наверное каждый бы урок занимал по минут 20, но, лично для меня, это было бы интересно)

[@denisgorelov3236]

Интересное предложение, спасибо. Появится лишнее время возможно реализуем.

[@bekzhanzulkashev5816]

@@denisgorelov3236 Ждем)

[@ВладимирВячеславович-э3щ]

Видео о том как быстро автор умеет работать с CSS. Молодец!

[@bekzhanzulkashev5816]

Выражаю огромную благодарность за это видео. Хоть я и новичок, но на это13-ти минутное видео я потратил 2,5 часа и у меня получилось.

[@ДаниилГуревич-г8з]

Великолепный урок! Спасибо большое автору!

[@bagafree]

Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается

[@TolikM]

Хороший канал. Спасибо за все видео. Спокойно и понятно.... Хауди хо правильно посоветовал...👍

[@denisgorelov3236]

Спасибо, Хауди хо от меня привет ).

[@ПерминовКирилл-я4д]

Супер!!! впервые я понял ВСЕ! От и до. Респект!

[@rusealgooglov6080]

Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!

[@DorozhkoOleg]

>>Списки отобразим по горизонтали при помощи display: flax, и делаем его по центру: Опечатку нашел на сайте, страница этого урока. Автор, ты все равно мегакрут. Сейчас меню делаю. У тебя учусь.

[@АлешаДрыкалик]

Отличный урок, спасибо большое) *Ждем вторую часть*

[@hiddenapproach4771]

Спасибо добрый человек!За 7 минут видео я понял гораздо больше чем за 330 страниц книги Бена Хеника!На которую убил 4 дня...Я таки прямо в восторге!Буду смотреть дальше твои видео!А то натыкался на часовые видео других людей,толку мало было

[@denisgorelov3236]

Такого рода комментарии очень приятно читать, понимаешь что потраченное время было не напрасно. Спасибо!!!

[@web-eea]

Красавчик! Все четко, без воды! Уважаю!

[@TheAlexmaxakt]

Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!

[@ЭдЛесничий-щ8т]

Отличный канал. побольше подписчиков тебе. ибо твой материал достоин внимания :)

[@Viktorres1]

Одним словом - крутяк! Теперь адаптацию под мобильные буду смотреть. Subscribe+)

[@_Fantom_.]

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

[@АлександрАфонин-я8щ]

Вообще годнота! Спасибо за видео! Наконец-то меню на nav-ах, а то все ролики бородатых годов

[@maxbuyer98]

Канал растет на "глазах"!

[@АлексейГундин-э9о]

Меню отличное, спасибо за урок!

[@faizulla5838]

Денис, не обижайся, но это было уже гдето в 2012м... тогда появилось, даже сайт в котором можно было скачать менюшки на CSS ? гармошкой... выпаданием вниз , смещением вбок. ,по своему заказу, заполнив поля онлайн. Сложнее платно, что проще бесплатно. Но если есть спрос, то освещать тему естественно надо. Молодца. Лайк.

[@grandmacter9064]

Я хочу узнать подробнее, о центровке иконки и текста через position: absolute.

[@avtomono52]

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

[@sergeigregul1546]

Всё чётко, ясно и по полочкам, лайк и подписка, продолжай делать гайды)

[@olgamazurenko8142]

Очень понравился урок. Все очень доступно и четко. Спасибо!

[@ЕвгенийСидельников-г5с]

Cпасибо за урок. Отдельный поклон за иконки :3

[@denisgorelov3236]

Спасибо, рад что материал был полезен.

[@TheStwot]

Автор турбофлеш! я в шоке как ты так быстро все делаешь... для меня это уровень бог...

[@denisgorelov3236]

Перестань, я не хочу растягивать на пол часа и больше то, что можно рассказать за 10 - 15 минут, когда это понимаешь. Я ценю время тех людей, которые меня смотрят, а набор кода и все остальное - это просто готовый результат трудов, которым я посвящаю все свое свободное время.

[@TheStwot]

я месяца 2 активно учу html и css, для меня сейчас это мечта, такая скорость кодинга.

[@vladivostok8922]

скорость кодинга) ты не заметил что видео приобретает скорость x2-x4 время от времени

[@ІванМись-о5с]

Переглядав багато різного відео по даній темі це вражає простотою зрозумілістю і ефективністю!!!

[@denisgorelov3236]

Спасибо, это то что я добиваюсь.

[@ВладимирБабинцев-ц2ж]

Спасибо большое, что выкладываете исходный код...

[@Relbick]

Я вам очень благодарен! Снимайте еще ;)

[@denisgorelov3236]

Спасибо! Возможно скоро начну.

[@LeonidProgrammer]

Охренеть, а что так можно было?! Бомба.

[@Free_474]

Супер, спасибо!! Сделайте, пожалуйста, видео про горизонтальную прокрутку элементов с кнопками

[@Angry_Welder]

Крутецкое меню! Еще бы крутые анимации на кнопки.

[@СергейКоноплицкий-ц3я]

Спасибо тебе огромное очень выручил!!! сделал через opacity а не через display:block; получилась плавней)

[@coffeemango7241]

Подскажите пожалуйста, а какую программу лучше использовать для svg изображений?

[@OxoTHuK13]

Денис, спасибо за замечательные уроки! Нашел Ваш канал по рекомендации от Хауди Хо и не пожалел. Небольшая поправочка: "Awesome" произносится как "Осом" (ударение на первый слог). )))

[@hakooplayplay3212]

Молодец! Маленькая подсказочка - awesome произносится примерно как "ооосэм". Правда я не спец в англ

[@BULBARASHGREEN]

Спасибо. Отличный урок. Все предельно просто и понятно

[@parkerparker9378]

Покажите как сделать анимационную новогоднюю рамку на всю страницу и разместить анимационные гиф картинки в углах страницы. а также как отражать картинку по горизонтали и по вертикали ? Спасибо Вам !

[@span4ev]

Как всегда туториалы высший пилотаж) спасибо.

[@widi2834]

Спасибо за годный урок теперь я умею делать меню!

[@makskyciny5622]

Очень крутой урок! Автор молодчага👌

[@FantazyEliott]

Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !

[@ВадимПавленко-ы9х]

Спасибо большое за урок. Вы молодец!!!!!

[@alexeikulikov2844]

Лайк и подписка. Автор молодец, очень подробное и доходчивое объяснение для начинающих.

[@benzin-n4s]

Смотрю в 2024, урок очень помог, спасибо!

[@vishnyo]

Для красивого - плавного появления вложенных блоков с меню элементами. Можно скрывать их через visibility:hidden, задать opacity: 0 , а при наведении на элемент меню сделать плавный переход из невидимого в видимый с помощью opacity: 1 приблизительно так: .subMenu { visibility: hidden; opacity: 0; transition: .3s; } .menuItem:hover .subMenu { visibility: visible; opacity: 1; }

[@denisgorelov3236]

Да, согласен, можно это задействовать.

[@АртурХвостик-о6ъ]

Класс видео! Очень полезно, и понятно) Так сказать "Без лишних слов"))) Спасибо!!!

[@Smyth47466]

Что за тег я никак не пойму? Как курсив может вставлять иконки? И что значит запись в css, в строчке 20: .dws-menu > ul li a? Почеу li и a подряд записываются?

[@Romzec1]

Очень интересные и познавательные уроки, молодец!

[@Фрагментыкино-ъ1х]

просто шикарно , легко и нечего сложного , спасибо тебе от моего сайта

[@denisgorelov3236]

У данного оформления выпадающего меню можно изменить с легкостью дизайн, также адаптировать под разные устройства экрана не составит труда. #2 ЧАСТЬ урока тут - kzbin.info/www/bejne/qoPSpK19itVoick (Адаптация под мобильные устройства)

[@it6706]

*DWS TV делай прожолжение!*

[@FlexDrayv]

С удовольствием бы посмотрел продолжение по адаптации этого меню под разные разрешения экранов и с последующем переходом в мобильное меню - СПАСИБО !!!

[@denisgorelov3236]

Ну, каждому свое, просто js немного капризнее, за то там более проще все реализовать. По загрузке все зависит от содержания файла и его функционала, при помощи консоли в браузере можно сравнить эти варианты, но я думаю особой разницы там не увидишь по крайне мере по данному функционалу. Каждый разработчик выбирает тот вариант в котором лучше всего ориентируется.

[@1ux443]

А как скачивать иконки?

[@denisgorelov3236]

В данной статье я описываю как это сделать bit.ly/2nHR4lt

[@ЮрийАлександрович-ч2щ]

Здорово буду теперь учиться сам делать такие)

[@dbuzeninka8005]

автор так понятно рассказал, что я прям хочу ему задонатить.

[@ivanivanov7494]

Спасибо за урок. Реально Awesome!!!

[@oce10t96]

Невероятно крутые уроки, спасибо тебе!

[@ВіталійПетушинський]

Полезное видео! Наконец-то создал меню для сайта)

[@kateshkurenko]

Спасибо за видео! Вы просто меня им спасли!!!

[@gamesplay9750]

Спасибо большое! Все понятно и легко!

[@yourrise9280]

Было великолепно, спасибо большое!!!

[@vicont9089]

Спасибо! Очень доступно и полезно.

[@Shephord]

Для тех кто не понял, как и я, но лень разбираться в проблеме самому вот как я сделал, создал папку "Выпадающее меню" в папку создал 1 файл "Index.html" и папку css, в папке css создать файл "style.css", скачал с Саита Font Awesome Веб "fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself" распаковать и скопировать папку под названиям "webfonts" в папке "Выпадающее МЕНЮ" а из папки css скопировать файл "all.css" в "Выпадающее меню/css" после этого достаточно подключат вот так: надеюсь всё понято Пример должно быть fas а не fab если не ошибаюсь fab это для про версий 23/08/2020

[@tiger_blabla]

Получилось, спасибо!!

[@Murlack]

спасибо большое за данное видео. Давно хотел научиться делать подобное меню

[@ОлександрБілоус-м5ъ]

Спасибо. Хороший урок!

[@ДокторАйболит-ц3з]

блин круто!! спасибо тебе! если бы не ты, то я бы сидел и мучился!! лайк, подписка

[@denisgorelov3236]

Не за что, надеюсь что другие видео тоже понравятся.

[@ЭйсВентура-б8д]

02-30 по 02-50 нихрена я не понял как их в архив скинуть,куда твои иконки улетели я так и не понял ...

[@АндрейШестаков-х6и]

У меня тоже такая проблема, вроде бы скачал, извлёк, подключил, а всё равно не работает, хз что делать

[@hertz3001]

@@АндрейШестаков-х6и да есть не понятные моменты и это минус данного урока

[@x1xWoTx1x]

Могу ошибаться, но сейчас есть возможность либо SVG файл скачать, либо через удаленный сервер себе их подключить.Целым архивом несколько штук,не знаю как. Тут по удаленке подключил, посмотри, может пригодится (ссылка с тайм кодом): kzbin.info/www/bejne/i36Vg6akZr2Yqtk

[@vladimirgrabar1771]

что не понятно что он их добавил с список скачки типа как в корзину, а потом все вместе скачал

[@АнараАслалеева]

Обалденный канал! Спасибо за контент! Для начинающих самое ТО! 100ЛАЙК!

[@andrewgrechukh3139]

Дуже вдячний за це відео!!! Щей навчився як швидше писати код

[@antonivanov9555]

Ооооочень круто! Спасибо!