Question

I built a nav area using css (it triggers a javascript function to bring up a sub nav). The issue I’m having is my space is limited, and the navigation area is a bit finicky feeling.

http://clients.sugarpillfactory.com/fce/wp/

I’m wondering if there is a technique or method for reducing the hit area in javascript or css? Currently I’m using an image “roll up” technique for the mouseovers, where on :hover, my image (that is cut off below) rolls up about 50px to show the mouseover state.

example:

aboutButton{

display: block;
float:left;
width: 136px;
height: 49px; 
text-decoration: none;
border-style: none;
outline: none;
background-image: url(images/header_images/about_dual.png);
}

aboutButton:hover{

 background-position: 0 -49px;
}

Any suggestions greatly appreciated.

-J

Answer 1

Take a look at the Hover Intent plugin. It will only trigger hover events after the user has paused on the element for an amount of time. It is quite customisable and works very well in my experience.