Context Menu Theme

Paste the following code into the head section of your site’s HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>

<link rel="stylesheet" type="text/css" href="src/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="src/ax5ui-menu/dist/ax5menu.css">
<script type="text/javascript" src="src/ax5ui-menu/dist/ax5menu.js"></script>

Recommand use font-icon, These days, you can download the font-icon in many service.

HTML

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Theme Select</label>
            <select class="form-control" id="select-menu-theme">
                <option value="default">default</option>
                <option value="primary">Primary</option>
                <option value="info">info</option>
                <option value="warning">warning</option>
                <option value="danger">danger</option>
            </select>
        </div>
        <div style="height:200px;background: #9aa9c7;padding: 10px;" id="context-menu-target">
            Right click on the mouse.
        </div>
        <p>
            Select a theme in the selection box, then please try to right-click on the DIV.
        </p>
    </div>
</div>

JS

<script type="text/javascript">
    var menu;
    $(document.body).ready(function () {
        menu = new ax5.ui.menu({
            position: "absolute", // default position is "fixed"
            theme: "primary",
            icons: {
                'arrow': '<i class="fa fa-caret-right"></i>'
            },
            items: [
                {
                    icon: '<i class="fa fa-comment"></i>',
                    label: "Menu A",
                    items: [
                        {icon: '<i class="fa fa-hand-peace-o"></i>', label: "Menu A-0"},
                        {icon: '<i class="fa fa-hand-rock-o"></i>', label: "Menu A-1"},
                        {icon: '<i class="fa fa-hand-stop-o"></i>', label: "Menu A-2"}
                    ]
                },
                {
                    icon: '<i class="fa fa-comments"></i>',
                    label: "Menu B",
                    items: [
                        {icon: '<i class="fa fa-pencil-square"></i>', label: "Menu B-0"},
                        {icon: '<i class="fa fa-phone-square"></i>', label: "Menu B-1"},
                        {icon: '<i class="fa fa-plus-square"></i>', label: "Menu B-2"}
                    ]
                }
            ]
        });

        $("#context-menu-target").bind("contextmenu", function (e) {
            menu.popup(e, {theme:$("#select-menu-theme").val()});
            ax5.util.stopEvent(e);
            // e || {left: 'Number', top: 'Number', direction: '', width: 'Number'}
        });
    });
</script>