Scaling elements Upward with Scriptaculous

Question

I'm building a little menu item using Prototype/Scriptaculous.

The little test I have setup uses Effect.Scale on a menu item. I'd like the item to scale upward and push the other element up with with it when you hover over the menu item.

I have the ul.nav set to a specific height, but the scaled element seems to be positioned absolutely so its removed from the flow and scales downward outside of the box.

Is there a way to do this or am I going about this wrong? Here is the page: DELETED , -invalid URL (http://krd/krd-design.net)

The 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;

}

The 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
        })
    });
}

})

Thanks! Rich

Answer 1

I've always has more success with Effect.Morph, than Effect.Scale. It gives you much finer control.