Фишки вёрстки под гитару :) Ребята, ставьте лайк и делитесь плиз моими видео в своих соц.сетях. *Чем больше аудитория, тем больше мотивации удивлять вас новыми уроками*
Не работает relative/absolute. У меня все подменюшки к потолку крепятся 🤦♀ И зачем создавать столько class? .menu li ul, .menu ul li > ul li a:link, .menu li:hover > ul - не работают?
Здравствуйте. При наведении на "Пункт 1" его фон меняется на более светлый и появляется подменю. При наведении курсора на подменю цвет фона основного меню возвращается к исходному цвету.Как сделать чтобы пункт основного меню оставался выделенным при переходе уже в подменю?
Я думаю при наведении для анимации тега вправо вместо padding использовать translate. В этом случае браузер не будет пэйнтить, а всё произойдёт в composite layers. На десктопе это конечно не заметно, но на слабых мобилках FPS может проседать
При выводе подпунктов за пределы контейнера (top: -9999px;), transition отрабатывает только в одну сторону. Но если -9999 изменить на 0 или что-то очень близкое (главное, чтобы в рамках контейнера), тогда работает корректно. Но в этом случае мы цепляем курсором соседние подпункты и эти подпункты визуально прыгают. Ни смена времени в transition на вплоть до 40 секунд ни игра с свойствами transition-timing-function эффекта не принесли. Вопрос, как можно обойти эту ситуацию?
Подскажите пожалуйста, есть задача построить такое же меню, но не с самописными пунктами меню, а с категориями и подкатегориями товаров из virtuemart? Реально ли это сделать?
s005.radikal.ru/i209/1509/65/71aeb7ac9eb1.jpg почему не открывается? уже несколько кодов попробовал а итог один. файл стиля сохранил, всё сделал. в чём дело?
Изначально хотелось бы поблагодарить Вас за очень познавательный урок. Спасибо Вам большое!!! Плиз, подскажите почему у меня не закругляются нижние углы меню (основного пункта), однако нижние углы подпункта закруглились. Не могли бы Вы подсказать где ошибка: .menu li:last-child a, .menu li .menu__drop li:last-child a{border-radius: 0 0 5px 5px; border-bottom: 0;} .menu li .menu__drop li a{ border-radius: 0;}
При округлении углов и устранении нижней линии можно избежать извращений, удлинняющих код, если использовать не контекстные, а дочерние селекторы ссылок. .menu li:first-child>a {border-radius: 3px 3px 0 0;} .menu li:last-child>a {border-radius: 0 0 3px 3px; border-bottom: 0;}
Бывают случаи, когда в пункте находится один подпункт, тогда он будет в несколько "извращенном" виде. В таких случаях есть смысл добавить ещё одну строку кода: .menu__drop li:only-child>a {border-radius: 3px; border-bottom: 0;} что сделает один пункт со всеми скруглёнными углами без нижней границы
А как такое сделать только горизонтально ... Первый уровень я сделал легко, а вот выпадающий не могу. как то не выходит привязать к нужной кнопке. Вылетает подменю не под той кнопкой. ;(
У меня такой вопрос, мое выпадающее меню, должно иметь собственные видимые границы, следовательно, border-left я не могу прописать, (чтобы сделать отступ от Сайд-бара), как поступить?
сказали без JS делаем, а зачем тогда папка JS нужна в корне?? я удалил все оставил тока те что у вас на видео точ в точ, и не получается когда до widht: 100% на .menu__drop{ дохожу
Здравствуйте, я использую свойства border-right: 2px solid #40c4c8; -moz-border-image: url(../img/raz.png) 1 stretch; -webkit-border-image: url(../img/raz.png) 1 stretch; и в браузерах на вебките картинка стоит не с правой стороны а с обеих сторон . как это исправить
Огромное спасибо за отличный урок. Подскажите пожалуйста - вы в .menu а добавили серый border-bottom. Подскажите, пожалуйста - как сделать border в 2 линии, чтобы сверху был серый бордер, а сразу под ним какой-нибудь белый (border-top), двойной в общем? Куда добавить border-top? Заранее благодарна
Что я делаю не так? как дохожу до места .menu__drop { position: absolute; width: 100%; } у меня все подменю становятся в ширину экрана. Уже проверил побуквенно код, даже номера строк в style.css выровнял как автора, все один в один! И все равно подпункты с указанием width: 100%; разлетаются во всю ширь!
+Master-CSS Тоже самое и у меня ПРОВЕРИЛ ВЕСЬ КОД ПО БУКВАМ ! !!!Даже все видео ваши с установкой плагинов пересмотрел, может думаю я что то упустил,а нет!Перепроверь на новых версиях программы. Урок, блин весь день убил а результата ноль.
Отличный урок. Скажите, а почему используете в названиях классов двойной слэш вместо обычного дефиса? В чем преимущество? Или это просто ваша привычка?
Хотел внести небольшую поправку, данная проблема появилась при реализации горизонтального меню сайта. Если в том блоке, где находится меню стоит overflow:hidden - все в порядке, но тогда меню обрезалось, и если убрать overflow:hidden, то свойство top:9999px растянет сайт на эту величину величину, мне помогло заменить top:9999px, на display:none и display:block, точно так же если навести на место выпадающего меню, то оно не будет появляться. Может кому поможет.
подскажите "чайнику": у меня возникла проблема с выпадающим меню. сделав по вашему видео у меня все получилось, но мне нужно №1 -это горизонтальное и №2 -это подменю второго уровня. я никак не могу сделать чтобы второй уровень был скрыт, а при наведениим на подуровень он появлялся :( вот исходники yadi.sk/d/Pm08k1UvhaJaU. может кто-что подскажет
Блин пацаны, помогите, когда он треугольники делал он добавил псевдо элемент афтер, но у меня квадратик только самому нижнему пунку доьавился, а ко остальным нет, а код как у него в точности
Просто факт: что бы экономить хоть немного времени можно опускать 0 к transition и не только, например transition : 0.8s это тоже самое что transition: .8s )
Jonlaut префиксы нужны что бы часть старых браузеров понимала свойства. Для множества свойств они есть. В Brackets есть спец-плагин для автоматического добавления префиксов - ruclips.net/video/pnBWj1HPZx8/видео.html
Сергей, Большое Спасибо за уроки!! Небольшой теоретический вопрос: а почему нужно писать: .menu__list:hover::after , а не .menu__list::after:hover и та же самая непонятка у меня возникла по: .menu li:first-child a (мне почему то казалось что .menu li a:first-child - правильнее, но сцуко не работает)/ Подскажите пжста!!!
Сергей, ".menu li:first-child a" читается как " в самом первом блоке li, который содержится в блоке .menu, выбрать элемент a". А так как Вы написали читается "в блоке lii, который содержится в блоке .menu, выбрать САМЫЙ ПЕРВЫЙ элемент a. Прочувствуйте разницу.
Я тоже по поводу "top: -9999em;" :) А не проще ли дать элементу "display:none; opacity:0;" по-умолчанию, а при наведении менять display:block;opacity:1; и к свойству opacity применить transition?
Фишки вёрстки под гитару :) Ребята, ставьте лайк и делитесь плиз моими видео в своих соц.сетях. *Чем больше аудитория, тем больше мотивации удивлять вас новыми уроками*
Ты крут, спокойно, понятно, содержательно. Спасибо.
За одну только гитару держи лайк
у меня подпункты не появляются( что делать?
Не опявляется меню при новедении(( что делать помогите)
a {text-decoration: none;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.side {
width: 200px;
margin: -40px;
}
.menu a {
background: #3d3d3d;
color: #fff;
padding: 10px;
display: block;
border-bottom: 1px solid #666;
transition: 0.5s all;
}
.menu a:hover {
background: #666;
padding: 10px 0 10px 20px;
}
.menu__list {
position: relative;
}
.menu__drop {
position: absolute;
width: 100%;
left: 100%;
opacity: 0;
top: -9999em;
}
.menu__list:hover .menu__drop {
opacity: 1;
top: 0;
}
а как называетца этот редактор?
Подробнее урока я за 10 видео ещё не увидел, спасибо тебе большое, очень сильно выручил, Дай Бог тебе всего наилучшего
Ах.еть, нет слово, благодаря тебе я начинаю понимать как прекрасен CSS, спасибо Серега !
pointer-events: none; Делает элемент не восприимчивым для мыши.
Зачем выносить блоки за экран?
Извините, а подскажите как сделать такое выпадающее меню только по горизонтали?
Не работает relative/absolute. У меня все подменюшки к потолку крепятся 🤦♀ И зачем создавать столько class? .menu li ul, .menu ul li > ul li a:link, .menu li:hover > ul - не работают?
Вот код кому лень писать
Пункт 1
Подпункт 1
Подпункт 2
Подпункт 3
Подпункт 4
Подпункт 5
Пункт 2
Пункт 3
Подпункт 1
Подпункт 2
Подпункт 3
Подпункт 4
Подпункт 5
Пункт 4
Пункт 5
Подпункт 1
Подпункт 2
Подпункт 3
Подпункт 4
Подпункт 5
Ну блин лентяи :)
Можно еще разок пошагово, без постороннего софта через Notepad или PhpStorm?
***** а я - тебя спрашивал, выскочка?
орнул
Скажите пожалуйста что это за программа?
Ваши видео просто шедевры Screencasting -a! :))перестает хотеться что-то делать, просто хочется смотреть и получать удовольствие...)
Во Серега жжет! Быстро, грамотно, качество и по делу!
Забрал к себе в группу ВК
Для новичков тяжеловато будет смотреть и параллельно делать
Не удивлюсь если ты просто всё съёбываешь у автора.
Побольше б таких уроков. Нет ничего лишнего. Очень спасибо. Желаю успехов в творчестве ^_^
Давно хотел этому всему научиться, много полезного за минимальное время. Огромное спасибо :)
а как можно меню выровнять по горизонтали а тут не помогает display: inline-block не хочет сотрудничать подскажите пожалуйста!
Впервые на этом канале...
Ну что сказать...
*Лайк, подписка!*
Даже не смотря видео)
Здравствуйте. При наведении на "Пункт 1" его фон меняется на более светлый и появляется подменю. При наведении курсора на подменю цвет фона основного меню возвращается к исходному цвету.Как сделать чтобы пункт основного меню оставался выделенным при переходе уже в подменю?
Изящно и красиво, без всяких костылей.
Получил удовольствие от просмотра.
"Все гениальное - просто" и это правда.
Прошел Ваш урок с удовольствием! Классно, интересно, познавательно.
Всё что записываю в CSS не как не влияет и не отображается,что делать подскажите?
А зачем добавлять префиксы, и что это такое ?
Все очень доступно и четко выложено. Отличные у вас уроки!
Подскажите пожалуйста, почему когда я выделяю отдельно transition и выбираю добавить префиксы то все работает, а когда весь код то не хочет работать?
Я думаю при наведении для анимации тега вправо вместо padding использовать translate. В этом случае браузер не будет пэйнтить, а всё произойдёт в composite layers. На десктопе это конечно не заметно, но на слабых мобилках FPS может проседать
Да и спасибо за видео))
При выводе подпунктов за пределы контейнера (top: -9999px;), transition отрабатывает только в одну сторону. Но если -9999 изменить на 0 или что-то очень близкое (главное, чтобы в рамках контейнера), тогда работает корректно. Но в этом случае мы цепляем курсором соседние подпункты и эти подпункты визуально прыгают. Ни смена времени в transition на вплоть до 40 секунд ни игра с свойствами transition-timing-function эффекта не принесли.
Вопрос, как можно обойти эту ситуацию?
Как сделать так что бы выпадающее меню толкало ниже стоящие элементы.У меня они поверх других выходят.Помогиитеее срочно домашку надо сдавать !!!!!!!
у меня маленькая проблема, когда навожу, список появляется не слева, а в том же ряду, под главным списком
Лайк, подписка и колокольчик. На всё нажал, так ещё и другу видео скинул. Сейчас для пракитики сайт пишем. Обучаемся тому, чему нас не научили.
сразу видно - работает профи!
Извините не поделитесь ссылкой на урок з 3-х уровневым меню аналогичным... не могу Ваш пример переделать (нехватает опыта).
Как включить живой просмотр чтоб автоматически отображался живой просмотр?
При применении position: absolute у меня все пункты подменю накладываются друг на друга...Почему так?
Подскажите пожалуйста, есть задача построить такое же меню, но не с самописными пунктами меню, а с категориями и подкатегориями товаров из virtuemart? Реально ли это сделать?
Это просто бомбезный урок, спасибо Серрега!...
s005.radikal.ru/i209/1509/65/71aeb7ac9eb1.jpg почему не открывается? уже несколько кодов попробовал а итог один. файл стиля сохранил, всё сделал. в чём дело?
Здравствуйте , а как сделать чтобы вот в меню сначала они идут слева в низ , а потом в какой-то момент слева в вверх в css?
Изначально хотелось бы поблагодарить Вас за очень познавательный урок. Спасибо Вам большое!!!
Плиз, подскажите почему у меня не закругляются нижние углы меню (основного пункта), однако нижние углы подпункта закруглились.
Не могли бы Вы подсказать где ошибка:
.menu li:last-child a, .menu li .menu__drop li:last-child a{border-radius: 0 0 5px 5px; border-bottom: 0;}
.menu li .menu__drop li a{ border-radius: 0;}
Ссылка на архив не работает. Можно как-то починить? Очень нужно освоить эту тему.
все круто, четко и понятно!) и музыка на фоне - отличная!:))
При округлении углов и устранении нижней линии можно избежать извращений, удлинняющих код, если использовать не контекстные, а дочерние селекторы ссылок.
.menu li:first-child>a {border-radius: 3px 3px 0 0;}
.menu li:last-child>a {border-radius: 0 0 3px 3px; border-bottom: 0;}
+Penamuky благодарю.
+Penamuky и да , я пол часа ломал голову , где я в коде накосячил , прежде чем понял , что именно это и отменило ховеры))
Бывают случаи, когда в пункте находится один подпункт, тогда он будет в несколько "извращенном" виде. В таких случаях есть смысл добавить ещё одну строку кода:
.menu__drop li:only-child>a {border-radius: 3px; border-bottom: 0;}
что сделает один пункт со всеми скруглёнными углами без нижней границы
тоже хотел написать что слишком перемудрил с контекстными селекторами.
А как такое сделать только горизонтально ... Первый уровень я сделал легко, а вот выпадающий не могу. как то не выходит привязать к нужной кнопке. Вылетает подменю не под той кнопкой. ;(
А в первой строчке файла css - это для чего код?
Отличный канал, ответили на мои давно волнующие меня вопросы. Это текстовой редактор Sublime ???
+Егор Эйхгорн brackets. На канале есть курс по этому редактору.
Подумаю над этим. Если время будет - заделаю. Сейчас совсем другие планы
Если не при наведении, а при нажатии?
У меня такой вопрос, мое выпадающее меню, должно иметь собственные видимые границы, следовательно, border-left я не могу прописать, (чтобы сделать отступ от Сайд-бара), как поступить?
сказали без JS делаем, а зачем тогда папка JS нужна в корне??
я удалил все оставил тока те что у вас на видео точ в точ, и не получается когда до widht: 100% на .menu__drop{ дохожу
Почему вместо overflow, вы использовали top: -9999em; ?
Какой редактор используете в данном уроке?
А как сделать так же само только горизонтальное меню в css файле
A Можно сделать dropdown без "ul, li "?????
А что это за дополнение такое, которое добавляет красивые иконки напротив файлов и показывает сетку в поле редактора?
Здравствуйте, не подскажите: как сделать так, чтобы выпадающий список всегда начинался там, где первый(самый верхний) пункт меню? Заранее спасибо!
Один из самых лучших уроков, спасибо!
Здравствуйте, я использую свойства border-right: 2px solid #40c4c8; -moz-border-image: url(../img/raz.png) 1 stretch;
-webkit-border-image: url(../img/raz.png) 1 stretch; и в браузерах на вебките картинка стоит не с правой стороны а с обеих сторон . как это исправить
ПОЧЕМУ когда я в css пишу .menu a {...} ничего не работает? у меня просто все на странице пропадает ааааааааааааааааааааааааааааааааааа
Ну ты потный пацан, лайк и респект тебе за эту обучалочку, мой багаж знаний набрал обороты)))
подскажите как сделать такое же меню, но только горизонтально, чтоб меню было в ряд? Очень надо )
Чем отличается position:absolute от position:relative?
поясните для чайника - поставил joomla, как применить ваше видео к joomla, хотя б в общих чертах?
где этому научится? знаю ксс и аштимель, но эт очень жестко! АРХИВАЖНО - есть ли плагин для живого просмотра на notepad++?
Какой редактор Вы используете?
Огромное спасибо за отличный урок. Подскажите пожалуйста - вы в .menu а добавили серый border-bottom. Подскажите, пожалуйста - как сделать border в 2 линии, чтобы сверху был серый бордер, а сразу под ним какой-нибудь белый (border-top), двойной в общем? Куда добавить border-top? Заранее благодарна
Что я делаю не так? как дохожу до места
.menu__drop {
position: absolute;
width: 100%;
}
у меня все подменю становятся в ширину экрана.
Уже проверил побуквенно код, даже номера строк в style.css выровнял как автора, все один в один! И все равно подпункты с указанием width: 100%; разлетаются во всю ширь!
крч... фиг его знает что с уроком, сделал по другому уроку и у меня все получилось. там подход к стилям другой...
+Владимир Денисов Значит где то была ошибка.
+Master-CSS Тоже самое и у меня ПРОВЕРИЛ ВЕСЬ КОД ПО БУКВАМ ! !!!Даже все видео ваши с установкой плагинов пересмотрел, может думаю я что то упустил,а нет!Перепроверь на новых версиях программы. Урок, блин весь день убил а результата ноль.
+Владимир Денисов вы бы код скинули.
На новых версиях какой программы?
здравствуйте! а что бы сделать трёх уровневый мне надо добавлять новые классы?
как это меню положить горизонтально
если можно кратко обьяснить
Хороший материал, но как его адаптировать, чтобы они было кликабельном на малых экранах? Спасибо!
Отличный урок. Скажите, а почему используете в названиях классов двойной слэш вместо обычного дефиса? В чем преимущество? Или это просто ваша привычка?
Хотел внести небольшую поправку, данная проблема появилась при реализации горизонтального меню сайта. Если в том блоке, где находится меню стоит overflow:hidden - все в порядке, но тогда меню обрезалось, и если убрать overflow:hidden, то свойство top:9999px растянет сайт на эту величину величину, мне помогло заменить top:9999px, на display:none и display:block, точно так же если навести на место выпадающего меню, то оно не будет появляться. Может кому поможет.
подскажите "чайнику": у меня возникла проблема с выпадающим меню. сделав по вашему видео у меня все получилось, но мне нужно №1 -это горизонтальное и №2 -это подменю второго уровня. я никак не могу сделать чтобы второй уровень был скрыт, а при наведениим на подуровень он появлялся :( вот исходники yadi.sk/d/Pm08k1UvhaJaU. может кто-что подскажет
Блин пацаны, помогите, когда он треугольники делал он добавил псевдо элемент афтер, но у меня квадратик только самому нижнему пунку доьавился, а ко остальным нет, а код как у него в точности
Можно ли использовать z-index вместо того чтобы закидывать вверх подпункты? Будет ли это корректно?
Что ты нажимаешь в brackets? Вот например: div#content что то нажимаешь, и получается
Таб
как зделать его вертикальным?
Красавчик очень хорошо излагаешь материал!! Лайк подписка :)
Извините не подскажите почему у меня псевдокласс не работает при наведении мышкой не появляется .left-menu-list:hover .left-menu-drop{
}
Osmonov Sanzhar а где точка перед первым классом?
Master-CSS У меня было там точка просто hover только со ссылками работает а вот со списками почему то не работает не подскажете почему?
Должен работать. Без когда не скажу в чем проблема.
Master-CSS Я отправил вам по почте исходные коды пожалуйста помогите чем сможете.
ок
А чё у меня в Brackets так не работает?
а горизонтальное так не сделать, да?
У меня не работает конструкция: .menu_list:hover .menu_drop
можно ли сделать такое выпадающее меню без скачки файла ???
Офигительный урок, я с помошью него уже много чего сделал. ТОлько единственн не рабтает фишка с кнопкой таб
В какой программе вы работаете?
Добрый день! можно к выпадающему меню добавить еще выпадающее ?
А c# и unity это разные языки а то я пытаюсь найти почитать что-то про unity а выдает связь с #.?
unity это движок а не язык
скажите а что за редактор у вас
какая программа для верстки использовалась?
Просто факт: что бы экономить хоть немного времени можно опускать 0 к transition и не только, например transition : 0.8s это тоже самое что transition: .8s )
Lime Z я знаю, просто это привычка выработанная годами :) Никогда не пишу без нуля. Хоть убей и все тут:)
Во дает!Действительно мастер!
В какой программе он работает?
Подскажите пожалуйста, что за префиксы вы имели в виду в конце видео и для чего они нужны.
Jonlaut префиксы нужны что бы часть старых браузеров понимала свойства. Для множества свойств они есть. В Brackets есть спец-плагин для автоматического добавления префиксов - ruclips.net/video/pnBWj1HPZx8/видео.html
Сергей, Большое Спасибо за уроки!! Небольшой теоретический вопрос: а почему нужно писать: .menu__list:hover::after , а не .menu__list::after:hover и та же самая непонятка у меня возникла по: .menu li:first-child a (мне почему то казалось что .menu li a:first-child - правильнее, но сцуко не работает)/ Подскажите пжста!!!
Сергей, ".menu li:first-child a" читается как " в самом первом блоке li, который содержится в блоке .menu, выбрать элемент a". А так как Вы написали читается "в блоке lii, который содержится в блоке .menu, выбрать САМЫЙ ПЕРВЫЙ элемент a. Прочувствуйте разницу.
Спасибо
Я тоже по поводу "top: -9999em;" :)
А не проще ли дать элементу "display:none; opacity:0;" по-умолчанию, а при наведении менять display:block;opacity:1; и к свойству opacity применить transition?
Богдан Корецкий пробовал и такой вариант. Анимация не работала.
Что делают префиксы?
как делать точно это но горизонтальным
У меня opacity не робит, что делать ??
как у себя включить живой просмотр
Почему ты перестал снимать видео ? Ты же лучший
Пипец! Вот это я понимаю=) ,молодец, лайк и подписка,так держать!
Большое спасибо, очень качественный контент. Продолжай в том же духе.
Что за префиксы?
Делаю все как и у вас, но после добавления .menu__drop{
position: absolute; перестает работать, не могли бы скинуть на zarembo_nick@mail.ru исходники?
Всё очень доходчиво, спасибо за урок
А как сделать такое же меню, но горизонтальное?
тупо пишешь display: inline;
Лучше float:left;
@@abandoned7501 флоаты это прошлый век, норм ребята флекс боксы юзают
Сергей, на мобильном будет оно нормально отображаться?