Vertical Jquery Multi Level Menu with right side orientation

Features:

• Easy to setup with easy to understand example.
• Allows for multiple levels of menu, each with it's own link up to infinity.
• Spans to the left, thought for right side menus.
• Simple code easily modded even for javascript beginners.

Story:

While doing work on a random News CMS web application, I've found myself in the need of a Vertical Multi Level Menu where you mouse over to check which categories there are in the parent category.
I started searching for a JQuery plugin that acomplished that, but only found  horizontal oriented ones. But somewhere into a random forum where someone was asking for what I was looking for some guy said he modded one of those horizontal menu into a vertical one, it was supplied as a file called Menu.zip, had no information about the guy who modded it, only about the original.

There was another problem though, I needed a right side oriented vertical menu, as the I was working of was on the right side of the screen and the sub-menus should span to the left, so I modded it to make it so!

Download it here with a working demo:

jquery_multi_level_menu or go to google code

Demo Screenshot

Current Version: 0.1 (just good enough for release beta)

More information:

The file I downloaded had zero documentation, just an example good enough for me to make it work, but I shall provide you some information (yet small) you might find it useful:

menu.css is the style rules for the menu itself, while main.css was the rules I was using for the crummy site I was using it on that demo.
Menu.css is relatively well commented by the original author and you should be able to find out how to change it's appearance very easily if you know css. I stripped down some stuff that were there such this horrible background image.

On menu.js you will find the following:

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):

var arrowimages={down:['downarrowclass', 'images/down.gif', 23], right:['leftarrowclass', 'images/left.gif']}

The original author (of the top menu) was using a down arrow for tabs with a submenu, and a right arrow for submenus with sub-submenus. The first modder left that there, although the down arrow is not used at all in the code. When I modded however, I changed the right arrow to left arrow, yet leaving the index as "right" because I didn't want to change more stuff. The only thing from down used is down[2] which is 23 and it's inserted as a padding, I played around with this values and concluded that 23 is a good number.

In a future release I shall change how this is done, but I decided to keep it this way because it's easier for someone else to change this menu again or even revert it back to left to right or even back to top menu.

(just in case there were any doubt: original was a tabbed, top menu, some guy modded it to vertical left to right, I modded it to right to left.)

If your menu doesn't span in the right place you can try playing around with the menu.js, on line 34 there's:

var menuleft= this.istopheader? -211 : -(this._dimensions.w)

-211 is the position in pixel of where the first menu spans.

on line  37 theres:

$targetul.css({left:menuleft+"px", top:0, width:this._dimensions.subulw-10+'px'}).slideDown(jqueryslidemenu.animateduration.over)

I used the -10 to correct a little displacement on my first setup, but you can play around with the number to better suit your needs. You can also add and subtract pixels to the attribute left and top by adding or subtracting to the variable menuleft and/or changing the zero on top.