this type of hover effect

Placebo · 31-05-2010 12:35pm #1

Hey,
Looking to do something like this, hover over effect.
but not usisng images for the menu items, i could use image for the arrow.

Any ideas? or links to where something similar is used?

thanks

mewso · 31-05-2010 12:45pm

Simple css. Different image as background for the hover of the anchor. You could probably adapt it from this http://www.projectseven.com/tutorials/css/uberlinks/

TouchingVirus · 31-05-2010 12:52pm

#nav_container /* The Dark Blue */
{
    background-color: #37C0F4;
    height: 40px;
}

#nav /* The Light Blue /*
{
    background-color:#E5F6FD;
    height:30px;
    padding-bottom: 10px;
}

#nav ul li a /* The menu item */
{
  height: 34px; /* This height should be the height of the #nav style + height of the background image */
  line-height: 22px;
}

#nav ul li a:hover
{
    background: url("../img/menuHover.gif") no-repeat scroll center bottom transparent
}

The menuHover.gif image is a 7x4px (or whatever size you like) arrow with transparent pixels around the arrow.

If you make a different height arrow, remember to change #nav ul li a 's height to reflect it.

Essentially you're making the LI elements taller so they overflow into the dark blue of the #nav container and then placing the background image (a downfacing arrow) right at the bottom (the tip of the arrow will be at the bottom of the element). If you get your heights right, there will be no gap between the light & dark blue and it should look like your picture.

Placebo · 31-05-2010 12:54pm

Thanks Guys,
I didnt want to use extra phantom space under the menu but i guess thats the easiest option.

TouchingVirus · 31-05-2010 1:02pm

Placebo wrote: »

Thanks Guys,
I didnt want to use extra phantom space under the menu but i guess thats the easiest option.

It really is the easiest option, in fact I'm not sure how else you'd manage it without going down the javascript route and it's a whole lot of effort that a little overflow fixes

For posterity, here's the result when I firebug'd a site I made with upward facing arrows.

this type of hover effect

Comments