Пытается создать меню JQuery с подменю, который скользит вверх при наведении и скользит вниз, когда мышь выйдет

Question

Я нашел кого-то с учебником, показывающим, что я по существу после, однако, демонстрация предназначена для подменю, который слайды вниз, вместо того, чтобы подменю сдвигалось выше пункта меню.

Вот ссылка на учебник:

http://www.darkscarab.com/blog/read.php?id=14

Вот скрипт JQuery использует:

$(document).ready(function(){ 
    $(".submenu").slideUp(100, function(){$(".menu_item").css({overflow:'visible'})}); 
    $(".menu_item").hover(
     function(){ 
      if($(".submenu", this).queue().length < 2) 
       $(".submenu", this).slideDown(500); 
     },function(){ 
      $(".submenu", this).slideUp(500); 
     } 
    ); 
}); 

Когда я переключаюсь вне slideUp для slideDown и наоборот, вещи (работает даже тогда, когда я их не выключаю!), но слайд вниз, который должен произойти, когда я выхожу, действительно не работает. Это похоже на то, что подменю исчезает, а затем заканчивает его вниз по траектории в следующий раз, когда я нахожу его.

В принципе, это все икота-y и очень ненадежная.

У кого-нибудь есть блестящие идеи для этого новичка?

Большое вам спасибо!

Answer 1

.slideDown показывает элемент, начинающийся с height:0, а затем анимирует свойство высоты до полного значения. .slideUp оживляет высоту от полного значения до 0 и затем скрывает элемент. Чтобы создать анимацию, которую вы хотите, вы не можете просто переключать ее, так как вы хотите, чтобы slideUp отображался вместо скрытия и наоборот.

Если бы я был построен, что бы описал, я бы решительно позиционировал элемент в относительно позиционированном элементе в bottom:0, так что, когда я одушевляю свойство высоты, оно будет расти снизу. Тогда я бы создал function mySlideUp() так, чтобы его внутренний элемент, который изначально display:none; height:0, а затем .animate({height:'auto'},'slow'). Для function mySlideDown() я бы .animate({height:0},'slow'), а затем hide().

Я надеюсь, что это поможет. Написал его в псевдо-jQuery, так как вы новичок, и вам было бы полезно написать его сами. Удачи!

Answer 2

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

http://www.mrbandfriends.co.uk/

Но используя советы MHR, и в просматривал, как г-н Б закодировал их навигацию, я наконец смог получить работоспособный прокрутка вверх по навигации с панировочными сухарями.

Спасибо!