Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #44005
    julianlau
    Participant

    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.

    #131250
    julianlau
    Participant

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

    #131252
    pixelgrid
    Participant

    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

    #131262
    julianlau
    Participant

    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 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.