Frames support

COOLjsMenu can be used across the frames as you can see on this page. Top level items are in the top frame, and their submenus are in the bottom frame. To make similar page you have to do several steps.

First - describe frames structure in the toplevel file:

<frameset rows="33,*" border=0 frameborder=0>
<frame name="topFrame" src="top.html" scrolling="no">
<frame name="mainFrame"  src="main.html">
</frameset>

Frame "topFrame" will contain menu, and frame "mainFrame" will contain submenus.

Next step - create top frame. There must be top level items. Here is one of the ways to implement this via links:

<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td width="100"><a class="clsTopLink" href="#"
        onmouseover="menuEvent('test', 'mainFrame', 0, 'o')"
        onmouseout="menuEvent('test', 'mainFrame', 0, 't')">Home</a></td>
<td width="100"><a class="clsTopLink" href="#"
        onmouseover="menuEvent('test', 'mainFrame', 1, 'o')"
        onmouseout="menuEvent('test', 'mainFrame', 1, 't')">Scripts</a></td>
<td width="100"><a class="clsTopLink" href="#"
        onmouseover="menuEvent('test', 'mainFrame', 2, 'o')"
        onmouseout="menuEvent('test', 'mainFrame', 2, 't')">Download</a></td>
<td width="100"><a class="clsTopLink" href="#"
        onmouseover="menuEvent('test', 'mainFrame', 3, 'o')"
        onmouseout="menuEvent('test', 'mainFrame', 3, 't')">Support</a></td>
</tr>
</table>

'test' is the name of the menu in bottom frame (see below), and 'mainFrame' is the name of the bottom frame itself.

Next step - inserting menu into the bottom frame. There is nothing special with menu creation:

<script type="text/javascript">
var menu = new COOLjsMenuPRO("test",MENU_ITEMS);menu.initTop();menu.init();
</script>

And the last step - describe the menu structure:

var MENU_ITEMS =
[
        {"hidden_top":1, "pos":[0,10], "size":[0,0],"itemoff":[0,100],"leveloff":[0,0],"delay":500,"style":STYLE_TOP},
        {code:"",
                sub:[
                        {"size":[25,200], "itemoff":[24,0], "leveloff":[0,0], "style":STYLE1},
                        {code:'CoolDev.Com', url:"http://www.cooldev.com"},
                        {code:'JavaScript.CoolDev.Com', url:"http://javascript.cooldev.com"}
                        ]
        }
...

There is nothing special also with this structure, except two things. First thing: first item's submenu will be used as submenu for the first item in the top frame, second item's submenu will be used as submenu for the second item in the top frame and so on. Second thing: you have to manage submenus' positions on your own. In this sample distance between top menu's items is equal to "itemoff" filed value, so items and their corresponding submenus are positioned correctly.

Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String Wide String

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.

A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text.