How to

There are two menu in the page. Left menu call its action when start to move, right menu call actions when movements end. Both print some text in javascript console when startup.

$(document).ready(function () {
    //left menu
    $('#test-left').BootSideMenu({
        side: "left",
        pushBody: false,
        closeOnClick: false,
        onBeforeOpen: function () {
            alert('Menu will open soon');
        },
        onBeforeClose: function () {
            alert('Menu will close soon');
        },
        onStartup: function () {
            console.log('Left menu creations started');
        }
    });

    //right menu
    $('#test-right').BootSideMenu({
        side: "right",
        pushBody: true,
        closeOnClick: true,
        onOpen: function () {
            alert('Menu is opened');
        },
        onClose: function () {
            alert('Menu is closed');
        },
        onStartup: function () {
            console.log('Right menu creations started');
        }
    });
});

There is another event. Watch is in the next example.