Grow your CSS skills. Land your dream job.

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

  • # April 10, 2013 at 7:41 am

    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.

    # April 10, 2013 at 9:05 am

    Chris did a post on the jQuery MagicLine that may help point you in the right direction..the functionality is the same, but you’ll need to tweak it to do what you need:

    http://css-tricks.com/jquery-magicline-navigation/

    # April 10, 2013 at 10:02 am

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

    # April 10, 2013 at 10:10 am

    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

    # April 10, 2013 at 11:21 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".