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

>

6 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!

dmpost 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

Ailsa lee tec said...

This code is too much helpful for sliding menu.
Top software house in Pakistan

Mr Rahman said...

Really Great Post & Thanks for sharing.

Oflox Is The Best Web Design Company In Dehradun

Dscexperts said...

Website design company have a massive team of creative web designers who have experience and ideas out of the box. Your business's profile is your website, which any customer or potential customer will check.
for more information Website Design Company