<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>
<style>
    span.mode_en {
        color: #009000;
        margin-left: 7px;
        font-weight: bold;
    }
    span.mode_dis {
        color: #EE0000;
        margin-left: 7px;
        font-weight: bold;
    }
</style>
 
<div style="height: 400px; position: relative;">
    <div id="contextArea" style="position: absolute; left: 100px; top: 100px; width: 100px; height: 60px; border: #C1C1C1 1px solid; background-color: #E7F4FF;"></div>
</div>
<div>Hide All contextual menu mode - hide all opened context menu polygons on mouseout (true by the default)</div>
<br>
<div><input type="button" value="On/Off" onclick="onOff();"><span style="margin-left: 7px;"><b>Hide All</b> mode</span><span id="spmod" class="mode_en">enabled</span></div>
<script>
var menu;
function initMenu() {
    menu = new dhtmlXMenuObject("contextArea");
    menu.setIconsPath("../common/imgs/");
    menu.renderAsContextMenu();
    menu.loadXML("../common/dhxmenu.xml?e=" + new Date().getTime());
}
function onOff() {
    menu.setContextMenuHideAllMode(!menu.getContextMenuHideAllMode());
    document.getElementById("spmod").className = (menu.getContextMenuHideAllMode() ? "mode_en": "mode_dis");
    document.getElementById("spmod").innerHTML = (menu.getContextMenuHideAllMode() ? "enabled": "disabled");
}</script>