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

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

0 голосов
/ 21 мая 2010

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

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

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 и наоборот, он работает достаточно хорошо, скользя вверх (работает даже тогда, когда я их не выключаю!) - но скольжение вниз, которое должно произойти при выходе, не это действительно работает. Это похоже на то, что подменю исчезает, а затем заканчивает движение вниз, когда я наведусь на него.

По сути, все это сбой и очень ненадежный.

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

Спасибо большое!

Ответы [ 2 ]

1 голос
/ 21 мая 2010

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

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

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

0 голосов
/ 24 мая 2010

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

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

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

Спасибо!

...