слайд нижняя граница в слева по наведению

Question

у меня есть этот CSS для моего меню:

#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; 
} 

я хочу, чтобы иметь возможность сделать нижнюю границу (например, верхний один, но на дне) задвинуть от сторона по ссылке парении

здесь скрипку: http://jsfiddle.net/2w6NB/

Answer 1

Расположите элемент, который вы хотите, поступая с левой быть

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

Тогда вот некоторые примеры кода, которые вы могли бы успешно использовать для моделирования функциональных возможностей:

$("#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); 

}); 

Позвольте мне знать, если у вас есть вопросы или если он работает.

Answer 2

Я считаю, что эта ссылка поможет вам: Sliding with CSS и Affect Other Element on Hover

Цель здесь заключается в слайде линии/постоялец из "overflow:hidden;" DIV с использованием либо CSS WebKit перехода или яваскрипт функции. Вы не можете этого сделать на том же объекте, что и ссылки на меню, но вы можете установить его так, чтобы под ним располагался div, который позволял полосе перемещаться.

(Примером этого является установка "right:200px;position:absolute;width:200px;border-top:solid black 5px;" внутри объекта и DIV окружающего его "overflow:hidden;width:200px;". Затем вы используете переход на событии CSS парения или яваскрипт функцию для перемещения через объекта обратно в DIV, так что он может отображать.

Я надеюсь, что помогает!