Web Hosting by Netfirms | Free Domain Names by Netfirms

XMENU 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

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

Code!
<script language="javascript" src="xLayer.js"></script> <script language="javascript" src="xBoardedLayer.js"></script> <script language="javascript" src="xMouseEvents.js"></script> <script language="javascript" src="xMenu.js"></script> <script language="javascript" src="xAnchorTag.js"></script> <script language="javascript"> //Format Text Function function formatText(text,color,size){ if(!color) color = "red"; size=4; var o = '<font color="' + color +'" size=' + size +'>' var c = '</font>'; return o + text + c; } function handleIt(itmIndex){ alert(itmIndex); } function init(){ //m.defaultSubmenuArrow = 'js/images/submenu_arrow.gif' //Parent Menu m = new xMenu(100,"Menu Title"); m.add("Menu Item"); m.add("Menu Item"); m.add("Menu Item"); //First sub menu of parent Menu, sm1 = new xMenu(100,"Sub Menu"); sm1.add("Menu Item"); sm1.add("Menu Item"); sm1.add("Menu Item"); sm1.add("Menu Item"); sm1.add("Menu Item"); sm1.add("Menu Item"); sm1.add("Menu Item"); m.attach(sm1); m.add("Menu Item"); m.add("Menu Item"); //second sub menu of parent Menu, sm2 = new xMenu(100,"Sub Menu"); sm2.add("Menu Item 1"); //First sub menu of second sub menu of parent Menu, sm2_1 = new xMenu(300,"Sub Menu"); sm2_1.add("Menu Item"); sm2_1.add("Menu Item"); sm2_1.add("Menu Item"); sm2_1_1 = new xMenu(50,"Sub Menu"); sm2_1_1.add("Menu Item"); sm2_1_1.add("Menu Item"); sm2_1_1.add("Menu Item"); sm2_1_2 = new xMenu(50,"Sub Menu"); sm2_1_2.add("Menu Item"); sm2_1_2.add("Menu Item"); sm2_1_3 = new xMenu(150,"Sub Menu"); sm2_1_3.add("Menu Item"); sm2_1_3.add("Menu Item"); sm2_1_3.add("Menu Item"); sm2_1_2.attach(sm2_1_3); sm2_1_2.add("Menu Item"); sm2_1_1.attach(sm2_1_2); sm2_1.attach(sm2_1_1); sm2_1.add("Menu Item"); sm2_1.add("Menu Item"); sm2.attach(sm2_1); sm2.add("Menu Item"); sm2.add("Menu Item"); sm2.add("Menu Item"); sm2.add("Menu Item"); sm2.add("Menu Item"); sm2.add("Menu Item"); m.attach(sm2); m.add("Menu Item"); m.add("Menu Item"); m.make() m.show(); m.moveTo(0,0); m.slideTo(100,60); } </script>