CODEWITHSUNDEEP
htmlcss
oshirowanen
oshirowanen

Reputation: 15925

BBC style menu hover effect

WORKING SOLUTION:

http://jsfiddle.net/DPNLq/5/

ORIGINAL QUESTION:

I am trying to create a menu hover effect similar to the one found on the BBC website:

http://www.bbc.co.uk/

The top menu which creates a line at the bottom of the link being hovered over. I am trying to do something similar, but I want to line to be at the top.

I have created the following example, to show the problem I am experiencing:

http://jsfiddle.net/DPNLq/1/

<a href="#" class="menu_link">link 1</a>
<a href="#" class="menu_link">link 2</a>
<a href="#" class="menu_link">link 3</a>

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:0px 5px 0px 5px;
}

a.menu_link:hover{
    border-top:5px solid black;
    padding-top:5px;
}

When hovering over my example links, the line pushes the link down. I don't want this to happen, and I can't figure out how to stop it from happening.

Any suggestions?

Upvotes: 0

Views: 498

Answers (4)

Thizzer
Thizzer

Reputation: 16673

Add this to your menu_link default css

border-top: 5px solid transparent;

So it ends up like this;

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:0px 5px 0px 5px;
    border-top: 5px solid transparent;
}

If you want to keep the padding, you can set the box-sizing to border-box, but keep in mind that this is css3 and won't work in older browsers

    a.menu_link{
        height:50px;
        display:block;
        float:left;
        margin-right:10px;
        padding:0px 5px 0px 5px;
        border-top: 5px solid transparent;

        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }

Upvotes: 3

Vince P
Vince P

Reputation: 1791

Working example - http://jsfiddle.net/DPNLq/4/

.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:10px 5px 0px 5px; 
}

a.menu_link:hover{
    border-top:5px solid black;
    padding-top:5px;
}

Upvotes: 0

gaynorvader
gaynorvader

Reputation: 2657

Match the top elements (padding and border) before the hover:

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:5px 5px 0px 5px;
    border-top: 5px solid transparent;
}

http://jsfiddle.net/DPNLq/2/

Upvotes: 0

Quentin
Quentin

Reputation: 944010

Keep the border there all the time. Just change its colour. (From transparent if you can't match a solid colour).

Upvotes: 4

Related Questions