Grow your CSS skills. Land your dream job.

Hoverflow plugin giving me headaches

  • # August 1, 2011 at 2:54 am

    I am testing a design based on Chris’ AWESOME WordPress tutorial series on Lynda.com. The hoverflow plugin is used to animate navigation. There is a 3D effect that is achieved by adding tags to every navigation

  • . The hoverFlow works like a charm, except when you hover over the different buttons quickly. The portion then seems to dissapear for a millisecond, and re-appear magically. This messes up the overall look and feel of course.

    I tried lots of things to solve this, but I am simply unable to find the error which is causing the behavior. At first I thought it had something to do with overflow:hidden, but I can’t get it to work.

    Is there anyone out there that can point me in the right direction?

    I have a testsite setup here.

    The navigation script is as follows:

    // when the DOM is ready
    $(function() {

    $(".menu-navigatie-container li a").append('');

    $(".menu-navigatie-container a").hover(function(e) {

    $(this)
    .hoverFlow(e.type, { width: 210 }, 200)
    .css('overflow', 'visible')
    .find ('span')
    .hoverFlow(e.type, { width: 5}, 200)

    }, function(e) {

    $(this)
    .hoverFlow(e.type, { width: 200 }, 200)
    .css('overflow', 'visible')
    .find ('span')
    .hoverFlow(e.type, { width: 10}, 200)


    });

    })

# August 4, 2011 at 2:30 pm

Is there no-one that is willing to take a look at this? Please help me out guyz…

Thanks heaps!

# October 23, 2011 at 3:48 pm

hi, very nice use case for my plugin…

yeah, it’s somehow related to the overflow property. i guess it’s set and removed by jQuery somewhere on the way.

i solved the issue by setting the overflow property on the link itself instead of the span:

#menu-navigatie li a {
overflow: visible !important;
}

/ralf

# December 31, 2011 at 11:13 am

Ralf,

you’re my HERO! Thanx, this solved it!

Btw, sorry for the late reply, I hadn’t noticed the reaction to my request!

# October 25, 2012 at 9:55 pm

Thanks a lot Ralf!…

I was having the same problem with a nav menu!

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".