Configuration showSubmenuMode

Specifies options of submenu showing and hiding.

Type: Object|String
Default Value: { name: 'onHover', delay: { show: 0, hide: 0 } }
Accepted Values: 'onHover' | 'onClick'

By default, the secondary-level submenus of the dxMenu widget are displayed on the same event as the first-level submenu. To set another event for displaying secondary-level submenus, use the showSubmenuMode option. Alternatively, you can change the event on which the first-level submenu is displayed. For this purpose, use the showFirstSubmenuMode option.

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div style="width: 100%; height: 100%;">
        <div dx-menu="{
            items: menuItems,
            bindingOptions: {
                showSubmenuMode: 'currentMode'
            }
        }"></div>
    </div>
    <div class="option">
        <div>showSubmenuMode</div>
        <div ng-model="currentMode" dx-select-box="{
            items: modeValues
        }"></div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.menuItems = [
        {
            text: "Tutorials",
            items: [
                { text: "VS Integration" },
                {
                    text: "UI Widgets",
                    items: [
                        { text: "Knockout Approach" },
                        { text: "jQuery Approach" },
                        { text: "Angular Approach" }
                    ]
                },
                { text: "Data Visualization" },
                { text: "Data Layer" }
            ]
        },
        {
            text: "Guides",
            items: [
                { text: "Demos Inside" },
                { text: "UI Widgets" },
                { text: "Data Visualization" },
                { text: "Themes" },
                { text: "Common" }
            ]
        },
        {
            text: "Reference",
            items: [
                { text: 'Data Library' },
                { text: 'UI Widgets' },
                { text: 'Data Visualization Widgets' },
                { text: 'CSS Classes' },
                { text: 'UI Events' }
            ]
        }
    ];
    $scope.modeValues = ["onHover", "onHoverStay", "onClick"];
    $scope.currentMode = "onHover";
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align:center;
}
.demo-page{
    width: 400px;
    height: 250px;
    margin: 0 auto;
    background-color: #F0F0F0;
    text-align: center;
}
.option{
    width: auto;
    margin: -70px 20px;
    border-top: dotted 1px #888;
    border-bottom: dotted 1px #888;
}
.option > div{
    margin: 5px;
    display: inline-block;
    width: 40%;
    vertical-align: middle;
}
<div class="demo-page">
    <div style="width: 100%; height: 100%;">
        <div data-bind="dxMenu: { 
            items: menuItems,
            showSubmenuMode: currentMode
        }"></div>
    </div>
    <div class="option">
        <div>showSubmenuMode</div>
        <div data-bind="dxSelectBox: {
            items: modeValues,
            value: currentMode
        }"></div>
    </div>
</div>
var myViewModel = {
    menuItems: [
        {
            text: "Tutorials",
            items: [
                { text: "VS Integration" },
                {
                    text: "UI Widgets",
                    items: [
                        { text: "Knockout Approach" },
                        { text: "jQuery Approach" },
                        { text: "Angular Approach" }
                    ]
                },
                { text: "Data Visualization" },
                { text: "Data Layer" }
            ]
        },
        {
            text: "Guides",
            items: [
                { text: "Demos Inside" },
                { text: "UI Widgets" },
                { text: "Data Visualization" },
                { text: "Themes" },
                { text: "Common" }
            ]
        },
        {
            text: "Reference",
            items: [
                { text: 'Data Library' },
                { text: 'UI Widgets' },
                { text: 'Data Visualization Widgets' },
                { text: 'CSS Classes' },
                { text: 'UI Events' }
            ]
        }
    ],
    modeValues: ["onHover", "onHoverStay", "onClick"],
    currentMode: ko.observable("onHover")
}
ko.applyBindings(myViewModel);
body{
    text-align:center;
}
.demo-page{
    width: 400px;
    height: 250px;
    margin: 0 auto;
    background-color: #F0F0F0;
    text-align: center;
}
.option{
    width: auto;
    margin: -70px 20px;
    border-top: dotted 1px #888;
    border-bottom: dotted 1px #888;
}
.option > div{
    margin: 5px;
    display: inline-block;
    width: 40%;
    vertical-align: middle;
}
<div class="demo-page">
    <div style="width: 100%; height: 100%;">
        <div id="myMenu"></div>
    </div>
    <div class="option">
        <div>showSubmenuMode</div>
        <div id="modeSelector"></div>
    </div>
</div>
$("#myMenu").dxMenu({
    items: [
        {
            text: "Tutorials",
            items: [
                { text: "VS Integration" },
                {
                    text: "UI Widgets",
                    items: [
                        { text: "Knockout Approach" },
                        { text: "jQuery Approach" },
                        { text: "Angular Approach" }
                    ]
                },
                { text: "Data Visualization" },
                { text: "Data Layer" }
            ]
        },
        {
            text: "Guides",
            items: [
                { text: "Demos Inside" },
                { text: "UI Widgets" },
                { text: "Data Visualization" },
                { text: "Themes" },
                { text: "Common" }
            ]
        },
        {
            text: "Reference",
            items: [
                { text: 'Data Library' },
                { text: 'UI Widgets' },
                { text: 'Data Visualization Widgets' },
                { text: 'CSS Classes' },
                { text: 'UI Events' }
            ]
        }
    ]
});
$("#modeSelector").dxSelectBox({
    items: ["onHover", "onHoverStay", "onClick"],
    value: "onHover",
    onValueChanged: function (e) {
        $("#myMenu").dxMenu("instance").option("showSubmenuMode", e.value);
    }
});
body{
    text-align:center;
}
.demo-page{
    width: 400px;
    height: 250px;
    margin: 0 auto;
    background-color: #F0F0F0;
    text-align: center;
}
.option{
    width: auto;
    margin: -70px 20px;
    border-top: dotted 1px #888;
    border-bottom: dotted 1px #888;
}
.option > div{
    margin: 5px;
    display: inline-block;
    width: 40%;
    vertical-align: middle;
}

delay

Specifies the delay of submenu show and hiding.

Type: Object|Number
Default Value: { show: 50, hide: 300 }

name

Specifies the mode name.

Type: String
Default Value: 'onHover'
Accepted Values: 'onHover' | 'onClick'