slide bottom border in from left on hover

Question

i have this css for my menu:

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    margin-right:20px;
    min-width:70px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#000000;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration:none;
    text-align: center;
}
#menu li a:hover { 
    border-color:#000000; 
    color:#000000;
}

i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover

here is a fiddle: http://jsfiddle.net/2w6NB/

score 0 · Answer 1 · answered Sep 26 '13 at 19:59

0

Position your element you want coming from the left to be

left: -200px; //or however much it takes to hide the element completely or partially

Then here is some sample code that you might be able to successfully use to model your functionality:

$( "#item" ).hover(function() {

        $( "#item" ).stop().animate({
            left: "-1" //shows item
        }, 400);}, function() {


        $( "#item" ).stop().animate({
             left: "-160" //this determines how far back the item goes after hovering 
        }, 400);

});

Let me know if you have questions or if it works.

answered Sep 26 '13 at 19:59

HC_

1,040
10
23

This assumes the OP is using jquery. – Octopus Sep 26 '13 at 20:16
dont suppose you cud create an example for me? – charlie Sep 26 '13 at 20:24

score 0 · Answer 2 · edited May 23 '17 at 12:13

I believe this link will help you: Sliding with CSS and Affect Other Element on Hover

The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.

(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.

I hope that helps!

slide bottom border in from left on hover

2 Answers2