Question

I built a drop-down nav using CSS and a little bit of Javascript. I am having trouble with flickering when the user first uses the navigation. It happens more often on some browsers as opposed to others(Chrome). It is really annoying, and this is my first time really using any javascript, specificly OnMouseOver and OnMouseOut in a nav. Here is the a link to the navigation: http://demo2.reclaimdesign.com/testnav.html. Is there a way to fix this?

Thanks,
DH

Answer 1

I suspect it might be as a result of images not being preloaded, i.e.: the ‘hover’ state images are only activated and loaded once the mouse has hovered over them.

I’d look into either preloading the images with Javascript so that they’re ready to rock ‘n roll when the user moves their mouse over the elements, or (even better) use sprites to include all the hover / non-hover images you need in one image which can be moved with CSS like a ‘slide-rule’ to achieve the same thing.

There are lots of examples on StackOverflow concerning image preloading, but here’s an example of how it could be achieved:

var image_to_preload = new Image();
image_to_preload.onload = function(){ // could do something here... };
image_to_preload.src = "/path/to/image.jpg";

Like I said, I’d prefer using sprites, and again I suspect there are loads of examples, but as an example for your menu, the items look like they’re 110 x 35 pixels in dimension, so if you created an image which was 110 x 70 pixels in dimension (both hover states shoved into one image) you could ‘slide’ it with CSS:

.menuAllProducts
{
    width: 110px;
    height: 35px;
    background-image: url(background-sprite.jpg);
    background-position: 0px 0px;
}

.menuAllProducts:hover
{
    background-position: 0px -35px;
}

I hope this helps and makes sense! Good luck! 🙂