平滑转换菜单下划线

Question

I'm trying to create a border-bottom that "scrolls" with the page under the menu. So basically, I'm using a one page wordpress theme, and when a user press on a menu item I wan't a border-bottom to move under the menu so it's following the page. An excellent example can be found on http://vatorsecurities.se/ If you either press on the menu or scroll down on that page you can find a little border that follows your scrolling. You can find the website I'm currently working on on http://euronsin.farrabah.se/

You can see that I have already added a border-bottom under each menu item when I scroll but I want a smooth transformation as it is on http://vatorsecurities.se So it doesn't just jump between menu items.

And I'm not quite sure if I'm completly on the wrong direction when adding a border-bottom, I'm thinking about creating a margin-left and a margin-right that changes when scrolling but I'm not quite sure if that's the right move towards achieving both good code and a good look.

Any help with this is highly appreciated.

PS. I've already searched A LOT for examples and haven't found anything like this. And understanding the code on website #1 is very hard.

Answer 1

The website that you gave as an example http://vatorsecurities.se/ uses an id called "active_indicator" witch has these css properties:

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

}

it also has some additional properties for the positions.

For the smooth transformation you can use the same : transition: 0.5s; that this site uses.