the css menu is not a problem

Mar 18, 2008

Floating or sliding vertical menus

Ahh,
yes, we have a script to make it float:
(add the script AFTER the vertical menu)

<!-- End of f-source menu code -->
<!-- This to make things float -->
<script type="text/javascript">
var target_x = 40;
var target_y = 143;
var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement &&
document.documentElement.clientWidth;
var fm_id='f-source-menu';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];
var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;
function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}
function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;
fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}
function float_menu()
{
var step_x, step_y;
compute_shifts();
step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;
step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;
if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}
setTimeout('float_menu()', 20);
};
compute_shifts();
if (document.layers)
{
// Netscape 4 cannot perform init move
// when the page loads.
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
</script>


Regards
Dmitry
f-source.com


> Here is an example that works closely to what I'm referring to. The only added feature would be the pop out menus like your example shows.
http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

>
> Thank you,
> Dave
>


> > Hi,
> > do you mean vertical menu like this one:
> > http://f-source.com/flash-menu-vertical/vista/ ???
> >
> > Can you show me example of the menu type?
> >
> > Regards
> > Dmitry
> > f-source.com
> >
> >
> >> In addition to what I've seen with the Vista Drop Down Menus, I need to
have a menu that floats down the left side of the web page and slide
out when the cursor is over the menu. Do you have such a menu?
> >>
> >>
> http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

>

3 comments:

Shana said...

Thanks! This helped me with a slide menu I created.

However, it doesn't slide in Firefox - it just sits there.

Do you know of a bit of code that could make the menu slide in FF?

Thanks!

f-source.com support said...

It must work in all browsers.

By the way the ID should be id='f-vertical-menu' with new versions.

var fm_id='f-source-menu';
var fm_id='f-vertical-menu';

wikisolpk1 said...

I created sliding menu using this code. It is working well. Web Development Company Islamabad