Как сделать выделение пункта активного меню при наведении на него?

Question

[evgenyforever]

Подскажите как сделать, так чтобы не сдвигались элементы и синяя полоса была под категорией, а не над ней.
Есть код, просьба дополнить. (чтобы получилось, как на картинке)


Сам компонент называется global-nav-indicator-bar

}
 .global-nav-indicator-bar {
    border-top: 0px solid #5787f4;
    bottom: 0px;
    display: block;
    left: 0px;
    transition: border-width 0.300s linear 0s;
    width: 100%;
}
#mainMenu > li:hover *:hover .global-nav-indicator-bar {
    border-top-width: 5px;
}
.global-nav-indicator-bar {
    display: block;
}

Comments

[Rustam Bainazarov]

А CSS?

[Johny Smith]

SmthTo, нажать надо на кнопку в центре "Edit on CodePen"

[Rustam Bainazarov]

Olek1, очень смешно. Когда я писал, тут был только HTML-код без Codepen'a.

[Johny Smith]

SmthTo, в истории изменения вопроса вроде нет никаких правок

[Rustam Bainazarov]

Olek1, это вопрос к «Тостеру».

Возможно ли запретить прокрутку в iOS Safari с сохранением текущего положения? — текст этого вопроса я правил 3 раза, но в истории правок это не отобразилось.

[Johny Smith]

SmthTo, а, тогда пардон

[evgenyforever]

Извиняюсь, вопрос правил несколько раз (первый раз здесь, просто очень нужно этот момент решить, всё не получается), чтобы увидеть весь код, необходимо нажать на кнопку в центре "Edit on CodePen".

[Rustam Bainazarov]

evgenyforever, да это понятно, LOL. Мы же не самые глупые тут собрались :))

Написал ответ с решением ниже.

[evgenyforever]

Я делал точно такую же черту на другом меню, как мне кажется всё дело в этом "position: absolute".

[Rustam Bainazarov]

evgenyforever, напоследок скажу, что для весьма тривиальной вёрстки у вас слишком много CSS и HTML-разметки.

[Rustam Bainazarov]

evgenyforever, посмотрите мой ответ.

P. S. Такую черту можно сделать кучей способов. Я привел самый простой и не требующий доп. правок + более производительный (хоть тут это и не очень заметно, тро-ло-ло)

[evgenyforever]

SmthTo, спасибо большое! То, что нужно, очень выручили!

Answer 1

[Rustam Bainazarov]

Box-shadow, а не border-top:

Comments

[Максим]

Салам ... есть интересная задачка тоже с Q&A хочешь голову поломать ?

[Rustam Bainazarov]

Максим Ленский, давай :))

Отвечу, правда, через 3–4 часа если там код будет нужен.

[Максим]

SmthTo, в общем смотри : https://ru.stackoverflow.com/q/923630/308951

[Rustam Bainazarov]

Максим Ленский, стоить на это обратить внимание:
https://codepen.io/chriscoyier/pen/41d6e36ac584ee0...

SVG-маска.

Дизайн, конечно, красивый и всё такое, но сделано это видео в After Effect, что настраивает на негожий лад. Навряд ли тут обойдётся простыми и понятными средствами.

Ещё советую посмотреть GSAP (пример: https://kentatoshikura.com).

[Максим]

SmthTo, я в svg не новичёк ... гсап частично бесплатный ...но если after effect то пусть так будет ... я думал можно рискнуть сделать на svg ...но прошло с начала вопроса достаточно много времени и я давно пробую это реализовать ...тщетно ... ладно ...я буду ломать голову дальше

[Rustam Bainazarov]

Максим Ленский, тут не будет просто CSS и HTML.

Тут будет куча SVG-масок, JS-трансформаций и прочее.

Я видел нечто подобное раньше. Сделано было на GSAP. Он умеет нормально контролировать такие комплексные вещи.

[Максим]

SmthTo, просто вопрос очень - очень интересный, наверное самый интересный из всех что я видел на ruSO и на Toster за 3 года

[Rustam Bainazarov]

Максим Ленский, да, задача интересная. Думаю, тут будет достаточно большое количество хаков, если это можно реализовать.

Такие сайты, на мой взгляд, будущее веба: больше анимаций, переходов, эффектов. Безусловно, простые, лаконичные и интерфейс-ориентированные сайты тоже никуда не денутся.

Просто как раз «концептуальные» сайты двигают технологии вперёд.

Думаю, что профессионалы взяли бы за основу именно GSAP: taotajima.jp.

Там вполне реально подобные вещи реализовать грамотно. Теоретически и вроде бы практически, технологии создания таких альфа-масок с размытием есть. Без применения безумных JS и шейдерных методов.

[Rustam Bainazarov]

Максим Ленский, смотри, посмотрел на досуге твою задачу. Без лютого JS не обойтись. Плавно менять значения размытия и размера тех же SVG-фильтров через JS, чтобы сделать такой эффект — очень затратно. Производительность даже на этом уровне падает ниже плинтуса.

Скорее всего, чтобы эмулировать альфа-маску, которую в том видео сделали в After Effect, нужно пилить шейдеры. Совершенно не разбираюсь в них, к сожалению.

[Максим]

SmthTo, С шейдерами я разберусь ... но задачка не моя но очень интересная ...я там не зареган ...

[Rustam Bainazarov]

Максим Ленский, не зарегистрирован? Не совсем понял.

[Максим]

SmthTo, на stackoverflow я не зареган ..я просто захожу и смотрю что там есть из вопросов

[Rustam Bainazarov]

Максим Ленский, а-а-а, теперь я понял.