<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxmenu_dhx_skyblue.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxmenu.js"></script>
<script src="../../codebase/ext/dhtmlxmenu_ext.js"></script>
 
<div style="height: 400px; position: relative;">
<div id="menuObj"></div>
<div id="contextArea" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF; visibility: hidden;"></div>
</div>
<input type="button" value="Load Menu" onclick="load();">
<input type="button" value="Unload Menu" onclick="unload();">
<input type="button" value="Load Context Menu" onclick="load2();">
<input type="button" value="Unload Context Menu" onclick="unload2();">
<br>
<script>
var menu,
menu2;
function load() {
    if (menu)
        return;
    menu = new dhtmlXMenuObject("menuObj");
    menu.setIconsPath("../common/imgs/");
    menu.loadXML("../common/dhxmenu.xml?etc=" + new Date().getTime());
}
function unload() {
    if (!menu)
        return;
    menu.unload();
    menu = null;
}
function load2() {
    if (menu2)
        return;
    document.getElementById("contextArea").style.visibility = "visible";
    menu2 = new dhtmlXMenuObject("contextArea");
    menu2.setIconsPath("../common/imgs/");
    menu2.renderAsContextMenu();
    menu2.loadXML("../common/dhxmenu.xml?etc=" + new Date().getTime());
}
function unload2() {
    if (!menu2)
        return;
    menu2.unload();
    menu2 = null;
    document.getElementById("contextArea").style.visibility = "hidden";
}</script>