Web Hosting by Netfirms | Free Domain Names by Netfirms

XTOOLBAR JAVASCRIPT OBJECT

Try and click on a top level menu item (Above) and watch the menu expand then if there is a submenu click on it and another menu will appear, keep doing this until the last menu is reached.

The menu collapses when a leaf item is activated or when the mouse cursor is not occupying the menus area for half a second. (change delay with static filed xMenu.COLLAPSE_ACTIVE_TIME.)

The menu is fully customizable, the following attributes can be set:

1. Automatic expansion
2. Menu Width
3. Left margin Padding
4. Horizontal gap between menus
5. All Colors: border,text, mouse over/out
6. Border Size
7. Menu Text
8. Menu Icon
9. xToolBar's Position (Adjust through xToolBar.js)

Override xMenu's onmouseup event to capture mouse clicks or add hyperlinks in the text of the menu.

Code!
<script language="javascript" src="xLayer.js"></script> <script language="javascript" src="xMouseEvents.js"></script> <script language="javascript" src="xBoardedLayer.js"></script> <script language="javascript" src="xMenu.js"></script> <script language="javascript" src="xToolBar.js"></script> <script language="javascript" src="xAnchorTag.js"></script> <script language="javascript"> // format text function function formatText(strTxt,strClr,lSiz){ strClr = (strClr)?strClr:"black" return '<font color="' + strClr +'" size=' + lSiz +'>' + strTxt + '</font>'; } function init(){ var m = new xMenu(100,formatText("TOM","black",4) ); m.add(formatText("Tom 1")); m.add(formatText("22222222")); m = new xMenu(100,"Menu Title"); m.add("Menu Item 1"); m.add("Menu Item 2"); m.add("Menu Item 2"); //First sub menu of parent Menu, sm1 = new xMenu(100,"Sub 1"); sm1.add("Menu Item 1"); sm1.add("Menu Item 2"); sm1.add("Menu Item 2"); sm1.add("Menu Item 2"); sm1.add("Menu Item 2"); sm1.add("Menu Item 2"); sm1.add("Menu Item 2"); m.attach(sm1); m.add("Menu Item 2"); m.add("Menu Item 2"); //second sub menu of parent Menu, sm2 = new xMenu(100,"Sub 2"); sm2.add("Menu Item 1"); //First sub menu of second sub menu of parent Menu, sm2_1 = new xMenu(300,"Sub 1"); sm2_1.add("Menu Item 2"); sm2_1.add("Menu Item 2"); sm2_1.add("Menu Item 1"); sm2_1_1 = new xMenu(50,"sm2_1_1"); sm2_1_1.add("Menu Item 2"); sm2_1_1.add("Menu Item 2"); sm2_1_1.add("Menu Item 1"); sm2_1.attach(sm2_1_1); sm2_1.add("Menu Item 2"); sm2_1.add("Menu Item 2"); sm2.attach(sm2_1); sm2.add("Menu Item 2"); sm2.add("Menu Item 2"); sm2.add("Menu Item 2"); sm2.add("Menu Item 2"); sm2.add("Menu Item 2"); sm2.add("Menu Item 2"); m.attach(sm2); m.add("Menu Item 2"); m.add("Menu Item 2"); m.add(formatText("3333")); m.add(formatText("44444")); var m2 = new xMenu(50,"A menu 2"); m2.add("111111"); m2.add("22222222"); var m3 = new xMenu(50,"A menu 3"); m3.add("111111"); m3.add("22222222"); var m4 = new xMenu(50,"A menu 4"); m4.add("111111"); m4.add("22222222"); var tb = new xToolBar(100); tb.add(m) tb.add(m2) tb.add(m3) tb.add(m4) tb.make() } </script>