On hover, move the navigation’s icon from current page item to the hovering

[julianlau]

I’m currently creating a navigation. So far, I have a bg-image for the hover/current-page item which just appears on hover/when the site is active.

But now, I want to advance it and add a nice transition effect to it. The idea was to move the icon of the current page item towards the hovering element.

http://i.imagebanana.com/img/tnrgkz92/1.JPG

So, if you are on start and hover over ‘Vertrieb’ the pointer above the text should move to Vertrieb.

If you are on ‘referenzen’ and move towards ‘blog’ or ‘über mich’ it should move towards it.

http://i.imagebanana.com/img/ty0781ar/2.JPG

I researched, however I didn’t find anything. Neither in German nor in English. Probably I missed the english one, since I’m not sure what to look after for it.

Any Ideas? I already made a lot of navigations with text-transition, but this is way over my skill level.

[julianlau]

Thank you! I guess there’s no way to do it in CSS only?

[pixelgrid]

if the indicator icon is a abolutelly positioned element for example div or span and inserted at the end of the ul list you can make seperate rules for hovering each navigation element like

.blog:hover ~ .indicator{left:500px}

you will have to calculate all the values your self

[julianlau]

Hey,
While this will work when everything is static, it’ll be hard/impossible if it’s dynamic.
Thank you guys for your help!

[Author]

Posts