Плавное преобразование меню подчеркивания

Question

Я пытаюсь создать границу, которая «прокручивается» со страницей под меню. Таким образом, в основном, я использую одностраничную тему Wordpress, и когда пользователь нажимает на пункт меню, я не хочу, чтобы он перемещался по меню, поэтому он следует за страницей. Отличный пример можно найти на http://vatorsecurities.se/ Если вы нажмете на меню или прокрутите страницу вниз, вы можете найти небольшую границу, которая следует за вашей прокруткой. Вы можете найти на веб-сайте я в настоящее время работает над на http://euronsin.farrabah.se/

Вы можете видеть, что я уже добавил границы дна под каждым пунктом меню, когда я прокручиваю, но я хочу плавную трансформацию, как на http://vatorsecurities.se Так это не просто перепрыгивает между пунктами меню.

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

Любая помощь с этим высоко ценится.

PS. Я уже искал A LOT для примеров и не нашел ничего подобного. И понимание кода на сайте №1 очень сложно.

Answer 1

Сайт, который вы дали в качестве примера http://vatorsecurities.se/ использует идентификатор, называемый «active_indicator» ведьма имеет следующие свойства CSS:

#active_indicator { 
width: 136px; 
height: 3px; 
background: #FFF; 
position: absolute; 
left: 0px; 
transition: 0.5s; 
opacity: 0; 

}

он также имеет некоторые дополнительные свойства для позиций.

Для плавного преобразования вы можете использовать то же самое: transition: 0.5s;, что использует этот сайт.