Масштабирование элементов Вверх с помощью Scriptaculous

Question

Я создаю небольшой пункт меню, используя Prototype/Scriptaculous.

Небольшой тест, который я настроил, использует Effect.Scale для пункта меню. Мне бы хотелось, чтобы элемент масштабировался вверх и с ним нажимал другой элемент, когда вы наводите курсор мыши на элемент меню.

У меня ul.nav установлен на определенную высоту, но масштабированный элемент, кажется, расположен абсолютно так, что он удален из потока и масштабируется вниз за пределы коробки.

Есть ли способ сделать это или я поступаю неправильно? Вот эта страница:УДАЛЕНО, -неправильный URL ( http://krd/krd-design.net)

CSS:

.menuitem {
border: 1px solid black;
width: 90px;

}

  .lift {
display: block;
background-color: gray;
width: 90px;
height: 1px;

}

 .nav {
border-bottom: 1px solid black;
height: 60px;

}

JavaScript

$$('.menuitem').each(function(s){
if($(s).down(1).tagName == 'SPAN' && $(s).down(1).className == 'lift') {
    var lift = $(s).down(1);
    $(s).observe('mouseenter', function() {
        new Effect.Scale(lift, 120, {
            scaleX: false,
            scaleY: true,
            scaleContent: false,
            scaleMode: { originalHeight: 100 },
            scaleFrom: 1
        })
    });
}

})

Спасибо! Богатые

Answer 1

У меня всегда был больший успех с Effect.Morph, чем Effect.Scale. Это дает вам более тонкий контроль.