Выпадающее МЕНЮ на чистом CSS / HTML
HTML-код
- Опубликовано: 8 апр 2017
- (2 часть) Адаптация под мобильные устройства - • #2 ЧАСТЬ - Выпадающее ...
Исходный код - bit.ly/2oVnIzd
В этом уроке мы сделаем, #выпадающее #горизонтальное #меню. Оно будет имеет #шрифтовые #иконки которые при наведении на меню меняют цвет.
Посмотреть и скачать код - bit.ly/2oVnIzd , а тут вторая часть - • #2 ЧАСТЬ - Выпадающее ...
Сделаем небольшую #анимацию, в ней меняем цвет кнопки и текста, добавляем тень и все это отображается при наведении.
#Выпадающие #списки меню можно реализовать многоуровневыми простым копированием #UL и это все довольно просто реализовано на чистом #CSS / #CSS3.
Обсуждение видео: • Выпадающее МЕНЮ на чис...
В уроке задействуем:
• #display: #flex;
• используем #transition;
• позиционировать элементы при помощи #position
Подписка на канал: dwstroy.ru/~dwstv
Видео сборник: dwstroy.ru/~S126H
*Видео метки*:
[01:13] - Структура разметки в #html
[02:22] - Подключаем шрифтовые иконки
[04:10] - Описываем #стили в #CSS
[04:29] - Подключаем шрифт Cuprum
[04:29] - Анмируем при наведении #hover
[08:10] - Выпадающее меню
[11:56] - CSS генератор #background
*Другие видео на канале DWSTV*:
Сайт с нуля - dwstroy.ru/~7KNnM
Уроки по #CSS - dwstroy.ru/~paoBU
1С Битрикс работа с сайтом - dwstroy.ru/~dEG4q
Управление системой Битрикс - dwstroy.ru/~Zdt4K
Настройки сайта 1С Битрикс - dwstroy.ru/~t0UVZ
Во время урока я использую:
Документацию по #CSS3
Редактор #PhpStorm
Ссылки из урока:
Архив кода на сайте - bit.ly/2oVnIzd
Шрифт Cuprum - bit.ly/2nulfPh
Шрифтовые иконки - bit.ly/2nXKJk3
Генератор Градиентов - bit.ly/2omhCtB
Использую музыку:
Love Me Like You Do (Violin Cover by Robert Mendoza) [from FIFTY SHADES OF GREY soundtrack]
• Love Me Like You Do (V...
Добавляйтесь к нам в друзья:
Сайт видео-уроков: dwstroy.ru/video/
Канал в VK автора уроков: dwstv
Канал группы в VK: dwstroy.ru/~MJM28
Мы очень рады если видео по #CSS3 #меню было Вам полезно, хотите "поблагодарить" жмите кнопку "нравится" и скиньте ссылку на урок друзьям. Это и есть самая лучшая благодарность, а также мотивация продолжать записывать обзоры и видео-уроки как по CSS, так и другим #WEB разработкам.
Полезные ссылки к уроку:
► Шпаргалка по быстрой верстке на EMMET - bit.ly/2zwDk1p
► Уроки по FlexBox - bit.ly/2CYN8lo
► Шпаргалка по иконкам Font Awesome - bit.ly/2nHR4lt
Простите , у меня не выстраивается меню в ряд .Думал дело в display: flex; , но все равно ничего не выходит подскажите пожалуйста .
Спасибо . Я выяснил в чем дело . У меня редактор дает баги . Пишу код- на странице ерунда , потом стираю его переписываю (или копирую и вставляю снова ) и все работает .
скинь
код
В выпадающем меню на пер пой кнопке левая граница толще чем на остальных (вернее она там двойная). Как исправить?
pp.userapi.com/c850520/v850520621/5538b/ucuStvsuMWk.jpg
Крч // border у всех элементов поставил одного цвета, а в // .dws-menu > ul li:first-child добавил строку // margin-left: -1px; в // .dws-menu li > ul li ul сделал // right: -153px; вместо 150. Вроде бы мелкие недочеты, но глаза мозолят. Теперь надо в выпадающем списке правую полосу поправить. Она в два раза толще левой. Еще градиент у меня при зуме иногда растаскивает кнопки. Поменял на один цвет. Не нашел как всё это исправить.
Отличный микрофон, монтаж и сам автор молодец. Говорит быстро и внятно, без заиканий . Спасибо вам огромное!
Я восторге от твоих уроков, не прекращай этим заниматься у тебя ТАЛАНТ!!!
Спасибо за комментарий, рад то уроки помогают.
ОЧЕНЬ ТРАВИТСЯ КОНТЕНТ ДАННОГО КАНАЛА! Приятно глазу и очень хорошо разобраны примеры!
Здравствуйте Денис, хочу сказать что у вас очень интересные уроки,
буду ждать (НОВЫХ)
СПАСИБО :-)
Спасибо за видео. Объяснение понятное, четкое и лаконичное. Лучшее видео по "менюшке", которое встречал в инете. Спасибо за работу.
Добрый день! спасибо огромное за ваш урок! Все делал по вашему уроку, все выходит замечательно!
Очень хорошо! Аплодирую стоя!!! Ждем продолжения по адаптации данного меню под адаптивную верстку)
Огромное вам спасибо! Нашел то чего искал, благодаря вам. Было очень понятно и ясно, а еще очень интересно!
Больше вот таких классных видеоуроков выпускайте !!! Респект вам!!!
Уровень знаний и подача материала впечатляет. Спасибо!
Отличный урок, спасибо большое)
*Ждем вторую часть*
Спасибо, прошло уже 4 года, а видео до сих пор актуально. Удачи.
не совсем, сайт с иконами изменился и всё совсем не так как на видео
сейчас такое лютое количество подобного контента, но твоя работа явно выделяется от остальных! мега круто
Так все быстро сказал, что я даже не успел запомнить)))
Спасибо большое !! Все супер.
Великолепный урок! Спасибо большое автору!
Идеально - кратко, понятно и по сути, качество записи на отлично!
Удивительное качество и подача материала, за готовый код с сайта отдельное спасибо. Видно сколько сил автор вложил в создание видео!
Спасибо!
Отличное видео. Звук и картинка на высшем уровне, а объяснение что, как и куда очень понятно. Спасибо большое, до этого думал, что это сложнее
Денис спасибо за видео, очень познавательно. Голос приятный, музыка на фоне спокойная - абсолютно не мешает. Лайк за видео и подписка на ваш канал обязательно! Респект.
люблю такие уроки, все по теме, развернуто, без воды. в копилку однозначно пока на запомню все!
Красавчик! Все четко, без воды! Уважаю!
Спасибо за уроки, смотрю твои видео и просто наслаждаюсь
Спасибо еще раз за твой труд,буду с нетерпением ждать новые,смотреть и лайкать старые уроки.
😔😔😗яяффвыс а о ssdfyijlllkjhgvgfdsaq123e4rt576y7u8ioòppppl
Assssssxxxxxxxc xmcv1waasscc b %
Спасибо большое, очень выручила отборка элементов по группам, просто и доходчиво! Пример супер!!!
Спапсибо за урок Денис! респект тебе. очень много в интеренете материалов, но ты обясняешь отлично! спасибо еще раз!
Отличный канал. побольше подписчиков тебе. ибо твой материал достоин внимания :)
Всё чётко, ясно и по полочкам, лайк и подписка, продолжай делать гайды)
Супер. По поводу адаптации +++. Буду ждать с нетерпением.
Очень понравился урок. Все очень доступно и четко. Спасибо!
Очень интересные и познавательные уроки, молодец!
Спасибо за информацию брат, очень доступно и понятно объяснил. Не думал, что это так просто делается
У данного оформления выпадающего меню можно изменить с легкостью дизайн, также адаптировать под разные устройства экрана не составит труда.
#2 ЧАСТЬ урока тут - ruclips.net/video/tRoszGUp5Sg/видео.html (Адаптация под мобильные устройства)
*DWS TV делай прожолжение!*
С удовольствием бы посмотрел продолжение по адаптации этого меню под разные разрешения экранов и с последующем переходом в мобильное меню - СПАСИБО !!!
Ну, каждому свое, просто js немного капризнее, за то там более проще все реализовать. По загрузке все зависит от содержания файла и его функционала, при помощи консоли в браузере можно сравнить эти варианты, но я думаю особой разницы там не увидишь по крайне мере по данному функционалу. Каждый разработчик выбирает тот вариант в котором лучше всего ориентируется.
А как скачивать иконки?
В данной статье я описываю как это сделать bit.ly/2nHR4lt
Очень крутой урок! Автор молодчага👌
Как всегда туториалы высший пилотаж) спасибо.
Невероятно крутые уроки, спасибо тебе!
Супер!!! впервые я понял ВСЕ! От и до. Респект!
Мужик люблю тебя только у тебя нашел выход из проблемы, которая ломала меня 2 недели
Канал растет на "глазах"!
*Я посмотрел DWS TV многих комментарии лайкает,комментирует.Молодец общается с зрителями.Желаю тебе успехов в дальнейшем!*
просто идеально, благодарю))) автору респекс.
Спасибо за интересный и очень познавательный урок.. С меня лайк и подписка!
Спасибо за урок.
Реально Awesome!!!
Меню отличное, спасибо за урок!
Я вам очень благодарен! Снимайте еще ;)
Спасибо! Возможно скоро начну.
Спасибо! Очень доступно и полезно.
Было великолепно, спасибо большое!!!
Спасибо. Отличный урок. Все предельно просто и понятно
Класс видео! Очень полезно, и понятно) Так сказать "Без лишних слов")))
Спасибо!!!
Спасибо большое за урок. Вы молодец!!!!!
спасибо за урок ,очень понравилось !
Очень понравился background кнопок в конце ролика, надо будет попробовать :)
Очень отличный видео ! Спасибо
Спасибо большое! Делал несколько раз меню для своих любительских проектов - и всегда это было сложно, долго и не пойми как. Хотя и работало по факту, но это была пытка - в результате стал просто бояться писать менюшки. А тут все настолько просто, понятно, быстро и доступно! Обязательно буду теперь пробовать у себя!
Видео о том как быстро автор умеет работать с CSS. Молодец!
Спасибо за годный урок теперь я умею делать меню!
Просто круто надеюсь у тебя будем много подписчиков, огромное спасибо !
Спасибо большое, что выкладываете исходный код...
Обалдеть, а че так можно было да? =) пипец, красавчик, давай еще =)
Огромное вам спасибо! Все понятно!!!!
спасибо за замечательный выпуск)
Здорово буду теперь учиться сам делать такие)
Спасибо большое! Все понятно и легко!
спасибо большое за данное видео. Давно хотел научиться делать подобное меню
Cпасибо за урок.
Отдельный поклон за иконки :3
Спасибо, рад что материал был полезен.
Спасибо большое, отличный урок
спасибо. полезно, эффективно и красиво =)
Респект 👍
Очень хорошо и толково. Благодарю!
Если бы ты сделал парочку макетов сайтов у себя на видеоуроках, разбил бы их на штук так 20 и за эти 20 уроков ты бы например запилил 2, 3 сайта разной сложности. От простого и легкого, к более сложному. Вот это было бы интересно, хотя так наверное каждый бы урок занимал по минут 20, но, лично для меня, это было бы интересно)
Интересное предложение, спасибо. Появится лишнее время возможно реализуем.
@@denisgorelov3236 Ждем)
Крутецкое меню! Еще бы крутые анимации на кнопки.
Ваще!!! Браток красава!!! ))))) От нас вам с кисточкой!!!
Отлично видео, спс, ждем адаптива)
Спасибо огромное! Было очень ясно и полезно!
Очень круто, спасибо
Красава, респект тебе, еле успевал. ))
Спасибо за видео! Вы просто меня им спасли!!!
Супер!Очень полезный урок.
Выражаю огромную благодарность за это видео. Хоть я и новичок, но на это13-ти минутное видео я потратил 2,5 часа и у меня получилось.
Ооооочень круто! Спасибо!
Полезное видео! Наконец-то создал меню для сайта)
очень круто, спасибо. попробую также ))
Спасибо. Хороший урок!
Слушай, ну просто топ!😀
Лайк и подписка. Автор молодец, очень подробное и доходчивое объяснение для начинающих.
отличный ролик, приятная музыка, смотрел в 2х кратном ускорении, дикция норм, инфа полезная, всего пару дней как начал лепить первый сайт, комент ради комента говорят за это бонусы дают блогерам
Урок топ! Ты лутший!
Дэнчик спасибо большое за твой труд !
Не за что!
Денис поставте лайк чтобы я хвалиться перед друзьями! )))
каналу удачи и много много подписчиков
Денис спасибо за хороший урок. Объяснил все четко и понятно, главное не спеша. Ждем еще такие уроки от вас. Еще хотел видеть от тебя в таком же темпе урок о PHP. Спасибо!
Вообще круто! Спасибо огромное!
Пасибо, предельно ясно и просто.
Отличный урок Денис.
css сейчас много интересного позваляет делать (без того же js). Такие уроки нужны. Ждемс продолжения
Смотрю в 2024, урок очень помог, спасибо!
Все довольно хорошо, даже идеально.
Благодарю, очень помог!
Охренеть, а что так можно было?! Бомба.
блин круто!! спасибо тебе! если бы не ты, то я бы сидел и мучился!! лайк, подписка
Не за что, надеюсь что другие видео тоже понравятся.
Привет 2020) очень круто спасибо!
Спасибо Денис! Ты лучший
Молодец все доступно объяснил спасибо за урок
Круто! Благодарю)