Horizontally slide menu on click

[superste2201]

Hi Guy's,

I don't really know javascript and normally just download scripts off the internet, but i can't find anything for what i want to do.

I have a side menu (ul) and i want this to slide to the other side of the screen (from right sidebar to left sidebar) onclick of a certain menu item.

How can i do this so that it will slide across and then load the page?

[superste2201]

Ok so what I need to do is have a script that will animate a div (with ul inside or just the ul) to make it move across the screen from right to left when they click 1 of the menu items that contain a submenu and then load the clicked page after the animation.

Would this be possible and how?

[bulevardi]

Perhaps with a JQuery script that you can animate?

For example a div that you can slide/animate from right to left:
http://api.jquery.com/animate/

If you know how to do that, JQuery will rock your ***

Or based on a simple slide javascript like this ?

[superste2201]

Hmm i think the jquery solution would be best, however would I be able to make the page load after the animation as it would be for menu link?

[bulevardi]

Of course,

But than you have to make 2 jquery functions:
1 that does the animation
1 that shows the menu at the position where it finally should stay

The first function can be triggered by an id on your first page.
If you click on a link in the menu, it loads another page where this trigger isn't mentioned anymore.

[superste2201]

hmmmmm I cant seem to get it to work.

I notice in the demo's they have a button to trigger the animation, whereas I have a link maybe this is why?

[bulevardi]

Make an id in your link. If this ID exists, trigger the function. Something like this:

var trigger = document.getElementById("trigger");
trigger.onclick = function youranimation();

[superste2201]

Hi Bulevardi,

Sorry for the long delay, I have been on holiday.

Ok im trying to do this animation in joomla and so it has no unique ID, however it does have a unique class (ul .menu > li .parent item6 > a > span).

Anything I try to do does nothing im really stuck on this one.