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
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

this type of hover effect

  • 31-05-2010 11:35am
    #1
    Registered Users, Registered Users 2 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

  • Moderators, Science, Health & Environment Moderators Posts: 9,035 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/


  • Registered Users, Registered Users 2 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.


  • Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭Placebo


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


  • Registered Users, Registered Users 2 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