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

Здравствуйте, подскажите как сделать плавный переход между пунктами меню 1 в 1 как на этом сайте - www.ge.com/digital .
Пробовал вот так, не помогло :(
.menu li:hover{
border-left-color: #359bbf;
transition: 0.5s;
}
  • Вопрос задан
  • 1733 просмотра
Решения вопроса 1
Это называется lavalamp menu.
Вот тут есть примеры с вертикальным меню.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
serjikz
@serjikz
web-developer
Я так понял нужна полосочка которая ездит в выпадающем. Сделано оно там вообще не на after. Если проанализировать код - там есть span, который absolute относительно всего выпавшего блока relative собственно (я не запариваюсь с объяснением, для человека который понимает более менее в вёрстке всё это и так ясно, так что если что не понятно - в комментах переспрашивайте). Логика - при наведении на тот или иной элемент узнавать его высоту и его расстояние от начала родительского элемента (с помощью jquery это делается в 2 счета вообще). Дальше задача просто сдвинуть на нужное количество px ваш бегунок. С ходу как рассчитать расстояние сверху имея высоту и расстояние элемента от начала родителя - я честно формулу не придумаю, так как спать хочу. Тут самостоятельно вам подумать стоит ну или пилить все пункты меню одинаковой высоты и опускать элемент на количество px сверху + там ну 3px (количество "+ там ну" узнаете самостоятельно, просто сдвиньте ваш бегунок сначала на количество px сверху {я под этим подразумеваю расстояние от в целом всего блока, который является выпадающим до элемента, на который навели} а потом спустите с помощью инспектора на середку вашего элемента и посчитайте на сколько спустили). Логика такая. Делайте сами, это будет интересно, а я спать. Не получится - пишите. Запилю на codepen иль ещё где и скину ссыль сюда, но уже завтра или когда свободное время будет.

Ссылка на скрипт от Алексей выглядит чет очень стремно, некрасивое перетекание вообще там.
Ответ написан
Комментировать
LenovoId
@LenovoId
svg, css,js
Не уверен что то что нужно но пример https://jsfiddle.net/atlanta/2oud4nn3/1/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы