JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
COOLjsMenu Samples

Standard:

item sizing
item positioning
border & pseudo-shadow
multiple levels
styles & colors
multiple instances
tips and status bar
IE filters
IE transitions

Professional:

popups
cross-frame
relative positioning
icons
arrows
advanced borders
z-index

Graphically Rich:

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9

COOLjsMenu - JavaScript menu: order now!

Rate It!

If you like COOLjsMenu
vote for it!

ScriptSearch.com

HotScripts.com

Positioning

Each item of COOLjsMenu and COOLjsMenu Professional can have it's own position. Top menu has absolute coordinates, and items are positioned as following: position of the first item of submenu is controlled by "levelofs" field - displacement of this particular item from it's parent, and all other items are positioned relatively to previous item according to "itemoff" field.

"Vertical" submenu was described like this:

{code:"Vertical",
    sub:[
        {itemoff:[21,0]},
        {code:"SubItem 1"},
        {code:"SubItem 2"},
        {code:"SubItem 3"},
        {code:"SubItem 4"}
    ]
}

I.e. every item will be shifted from it's previous neighbour 21 pixels down. "Horizontal" submenu was described exactly like "Vertical". Exception is "itemoff"'s value: [0,69], i.e 69 pixels in the right direction. "Diagonal" submenu has "itemoff" [21,10], i.e 10 pixels in the right direction and 21 pixels down.

"Sine" submenu was described as following:

{code:"Sine",
    sub:[
        {},
        {code:"SubItem 1", format:{itemoff:[21,0]}},
        {code:"SubItem 2", format:{itemoff:[21,10]}},
        {code:"SubItem 3", format:{itemoff:[21,5]}},
        {code:"SubItem 4", format:{itemoff:[21,-5]}},
        {code:"SubItem 5", format:{itemoff:[21,-10]}},
        {code:"SubItem 6", format:{itemoff:[21,-5]}},
        {code:"SubItem 7", format:{itemoff:[21,5]}},
        {code:"SubItem 8", format:{itemoff:[21,10]}},
        {code:"SubItem 9", format:{itemoff:[21,5]}}
    ]
}

Every item has it's own offset, which differs from previous item's offset. These offsets were calculated using sine function. You can put another values into "itemofs" to produce any other form. Second sample was made using same technique.