Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

this type of hover effect

Options
  • 31-05-2010 12:35pm
    #1
    Placebo
    Registered Users Posts: 8,070 ✭✭✭


    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


Comments

  • Options
    #2
    mewso
    Moderators, Science, Health & Environment Moderators Posts: 8,840 Mod ✭✭✭✭mewso


    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/


  • Options
    #3
    TouchingVirus
    Registered Users Posts: 8,584 ✭✭✭TouchingVirus 


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


  • Options
    #4
    Placebo
    Registered Users Posts: 8,070 ✭✭✭Placebo


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


  • Options
    #5
    TouchingVirus
    Registered Users Posts: 8,584 ✭✭✭TouchingVirus


    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 :D

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


Advertisement