CODEWITHSUNDEEP
htmlcssanimation
Adam Short
Adam Short

Reputation: 498

CSS animation causing some issues in relation to height and padding

http://jsfiddle.net/QsCNc/

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #1A1E2E;
border-bottom: 1px solid #ccc; 
height: 15%;
display: inline;
position: fixed;
z-index: 2;
}

#nav ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0; 
display: inline;
}

#nav li {
float: right; 
display: inline;
position: relative;
right: 20%;
top: 49%;
}

#nav li a {
display: block;
padding: 50px 15px;
text-decoration: none;
font-weight: bold;
color: white;
height: 50px;
/* animation */
z-index: 2;
position: relative;
transition: color 1s;
}

#nav li a:hover {
color: #c00;
}

#nav li a:before {
color: #C00;
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
top: -250px;
left: 0;
transition: top 1s;
z-index: -1;
border-bottom: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top: 1px solid #C00;
}

#nav li a:hover:before {
top: -70px;
}

Above is a link to the code for my website. It is best viewed full window so here's a link to the actual site: http://adamshort.site50.net

I'm having issues regarding the navigation. When you hover over them, an animation plays which is fine. However you can hover underneath the tabs by quite away and the animation will still play. I can't figure out how I can keep the animation the way it is but not be able to activate it when below it, as obviously this is a bit weird.

I've tried changing my padding, the height etc, but that changes the length of the white tab that drops down and I don't want that.

Upvotes: 0

Views: 115

Answers (2)

isherwood
isherwood

Reputation: 61079

You have 50px of padding on your menu anchors and a height of 50px, both of which are unnecessary on the anchors themselves.

Try this:

http://jsfiddle.net/isherwood/QsCNc/4

#nav li a {
    padding: 50px 15px 0;
    height: 20px;
}
#nav li a:hover:before {
    height: 220%;
}
#nav li a:before {
    transition: all 1s;
}

Adjust to suit.

Upvotes: 1

sn3ll
sn3ll

Reputation: 1685

 #nav li a {
     ...
     padding: 50px 15px;
     height:50px;
     ...

You have the a element's height set to 50px. Obviously the entire 50 px will start the animation on hover. Remove the height.

Second, padding is included in any hover event. Margin is not. Change the padding to margin and you should be good to go.

Or, remove the padding from the a element and add it to #nav li.

Upvotes: 1

Related Questions