0

Здравствуйте. Понадобилось создание выдвижного меня на jQuery, имеется такой код:

CSS:

.menu{
   position: absolute;
   top: 20%;
   left: 18%;  
}
.a_menu{
   background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#dddddd));
   background: -o-linear-gradient(top, #fefefe, #dddddd);
   background: -moz-linear-gradient(top, #fefefe, #dddddd);
   border-radius: 0 7px 0 7px;
   -webkit-box-shadow:0px 0px 8px white;
   -moz-box-shadow: 0 0 8px rgb(255, 255, 255);
   box-shadow: 0 0 8px rgb(255, 255, 255);
   position: absolute;
}

html:

<div class='menu' align='center'>
  <table>
    <tr><td><a href='' class='a_menu'>Ссылка 1</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 2</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 3</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 4</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 5</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 6</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 7</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 8</a></td></tr>
    <tr><td><a href='' class='a_menu'>Ссылка 9</a></td></tr>
  </table>
</div>

jQuery:

$('.menu a').hover(function(){
  $(this).animate({'left':$(this).offset().left+15},500);
},function(){
  $(this).animate({'left':$(this).offset().left-15},500);
});

При выполнении ссылки убегают далеко вправо и обратно не хотят возвращаться, подскажите пожалуйста, как это исправить. Заранее спасибо.

1 ответ 1

1

Не совсем понимаю, зачем вы используете offset(). Может такой вариант подойдёт?

P.S. В примере, я вместо таблицы использовал список (UL). Уж больно таблица в меню глаз режет ))

1
  • О, гуд) Работает, спасибо, offset() использовал для вычисления позиции объекта.
    – k0mar
    24 фев 2013 в 20:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.