Tigra Menu Product Family - Tigra Menu Product - how to make the menu "slide out"


	\| About Us \| Services \| Download \| Order \| Support \| \|

Not logged in [ Login | Register ]

SoftComplex Forums » Tigra Menu Product Family » Tigra Menu Product » how to make the menu "slide out"

Last active: Never

Printable Version | Subscribe | Add to Favourites

avanti

Newbie

Posts: 1
Registered: 6/23/2005
Location: Australia
Member Is Offline

posted on 6/28/2005 at 09:14 AM

how to make the menu "slide out"

I've been trying to make each level of the menu "slide out" and "slide back" instead of just appearing. I'm using setInterval() to increment/decrement the width of the menu item every 1/10th of a second, but I've run into a lot of problems.

For sliding back into the menu,

- only the last sub-item slides back,
- the rest of the sub items remain visible
- once you've opened one menu item, any other menu items do not display

I've also noticed that using an alert() box between calls of setInterval() allows a long enough delay for you to see ALL of the sub-items slide back, but in reverse order! Any other attempt at inserting a delay - for eg. writing a delay function and calling it instead of using alert() - does not have the same result.

Do you have any ideas how I can make this work properly?? Even just if it slides out, instead of slide out and in, would be extremely helpful.

Thank you!

Here's the code I've changed (all CAPITALISED variables are global).

function menu_collapse (n_id) {

// cancel item open delay
clearTimeout(this.o_showtimer);

// by default collapse to root level
var n_tolevel = (n_id ? this.a_index[n_id].n_depth : 0);

// hide all items over the level specified
for (n_id = 0; n_id < this.a_index.length; n_id++) {
//delay();
WIDTH = 140;
CURR_ITEM = this.a_index[n_id];
if (CURR_ITEM.n_depth > n_tolevel && CURR_ITEM.b_visible) {
intHide=setInterval("hide()", 100);
}
}

clearInterval(intHide);
// reset current item if mouse has gone out of items
if (!n_id)
this.o_current = null;
}

function hide() {

//delay so change of width is not instantaneous
for ( var x=0; x < 1000; x++) {}

if (WIDTH>0)
{
WIDTH=WIDTH-SPEED;
CURR_ITEM.e_oelement.style.width=WIDTH;
}
else
{
CURR_ITEM.e_oelement.style.visibility = 'hidden';
CURR_ITEM.b_visible = false;
clearInterval(intHide);
}
}

function delay() {
//for (var d = 0; d < 1000; d++) {}
}