Dropmenu

<div id="area1" class="area">
    <div class="msg">click here</div>
</div>
<script>
    $(function () {
        var div = $('#area1');
        var msg = div.find('.msg');
        var items = [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }, { k: 3, c: 'item 3' }];

        var dd = awem.dropmenu({ dataFunc: getData, select: select });

        div.click(function (e) {
            dd.open({ xy: { y: e.clientY, x: e.clientX } });
        });

        function select(it) {
            msg.html('you clicked ' + it.c);
        }

        function getData() {
            return items;
        }
    });
</script>

<div class="area" id="area2">
    <div class="card">
        <div class="big">a</div>
    </div>
    <div class="card">
        <div class="big">b</div>
    </div>
    <div class="card">
        <div class="big">c</div>
    </div>
    <div class="msg">click here, or on a card</div>
</div>
<script>
    $(function() {
        var div = $('#area2');
        var items = [];
        var msg = div.find('.msg');
        var dd = awem.dropmenu({ dataFunc: getData, select: select });

        div.click(function(e) {
            var card = $(e.target).closest('.card');
            items = [{ k: 1, c: 'item 1' }, { k: 2, c: 'item 2' }];

            if (card.length) {
                items.push({ k: 'hide', c: 'hide card ' + card.find('.big').html(), i: card.index() });
            }

            if (div.find('.card:hidden').length) {
                items.push({ k: 'all', c: 'show all' });
            }

            dd.render();
            dd.open({ xy: { y: e.clientY, x: e.clientX } });
        });

        function select(it) {
            msg.html('you clicked ' + it.c);
            if (it.k == 'hide') {
                div.find('.card').eq(it.i).hide();
            } else if (it.k == 'all') {
                div.find('.card').show();
            }
        }

        function getData() {
            return items;
        }
    });
</script>

<p>open on click:</p>
<div id='menu1'>
    <div class="mitem" data-prop="file">File</div>
    <div class="mitem" data-prop="meals">Meals</div>
    <div class="mitem" data-prop="help">Help</div>
</div>
<br />
<br />
<br />

<p>open on hover:</p>
<div id='menuHov1'>
    <div class="mitem" data-prop="file">File</div>
    <div class="mitem" data-prop="meals">Meals</div>
    <div class="mitem" data-prop="help">Help</div>
</div>

<br />
<br />
<br />
<p>side menu, open on hover:</p>
<div id='sideMenu' style="width: 100px">
    <div class="smitem" data-prop="file">File</div>
    <div class="smitem" data-prop="meals">Meals</div>
    <div class="smitem" data-prop="help">Help</div>
</div>
<div id="log1" style="min-height: 2em;"></div>
<script>
    $(function () {
        var data = {
            file: [
                { c: 'New' },
                { c: 'Save' },
                {
                    c: 'Recent Files',
                    nv: 1, // non value, clicking on it does nothing
                    it: [{ c: 'file1' }, { c: 'file2' }, { c: 'file3' }]
                },
                { c: 'Quit' }
            ],
            meals: [],
            help: [
                { c: 'View help' },
                { c: 'Feedback' },
                { c: '', cs: "o-litm", nv: 1 },  // horiz line
                { c: 'About' }]
        };

        $.when(cstorg.get('@Url.Action("GetMealsTreeImg", "Data")')).then(function (res) {
            data.meals = res;
        });

        function openMenu(mitem, right) {
            var prop = mitem.data('prop');

            var dm1 = awem.dropmenu({
                dataFunc: function () {
                    return data[prop];
                },
                minw: 150,
                submenu: true, // tree data as submenu
                asmi: prop !== 'meals' ? -1 : 0, // autosearch only for meals
                itemFunc: site.imgItem,
                select: function (item) {
                    awe.flash($('#log1').html('click on ' + item.c));
                }
            });

            dm1.open({ opener: mitem, right: right });
            return dm1;
        }

        // open on click menu
        $('#menu1').on('click', '.mitem',
            function (e) {
                var mitem = $(e.target);
                openMenu(mitem);
            });

        // open on hover menu
        awem.hovMenu({
            hover: $('#menuHov1').find('.mitem'),
            open: openMenu
        });

        // open on hover side menu
        awem.hovMenu({
            hover: $('#sideMenu'),
            hsel: '.smitem',
            open: function (opener) { return openMenu(opener, true); }
        });
    });
</script>

<script>
    $(function () {
        var data = {
            file: [
                { c: 'Home', k: '' },
                { c: 'About', k: 'Home/About' },
                {
                    c: 'Grid demos',
                    nv: 1, // non value
                    it: [
                        { c: 'Overview', k: 'GridDemo' },
                        { c: 'Filtering', k: 'GridDemo/Filtering' },
                        { c: 'Inline Editing', k: 'GridInlineEditDemo' }]
                }
            ],
            other: [
                { c: 'aweui', k: 'aweui' },
                { c: 'Mailbox', k: 'MailboxDemo' },
                { c: 'Cascade', k: 'MultipleLevelCascadingDemo' },
                { c: '', cs: "o-litm", nv: 1 },  // horiz line
                { c: 'Popup', k: 'PopupDemo' }]
        };

        function openMenu(mitem) {
            var prop = mitem.data('prop');

            var dm = awem.dropmenu({
                dataFunc: function () {
                    return data[prop];
                },
                minw: 200,
                submenu: true, // tree data as submenu
                asmi: -1, // no search
                clss: "amenu", // popup div class, .amenu in site.css makes the a occupy the whole li
                itemFunc: function (item) {
                    return item.k != null ? '<a href="' + document.root + '/' + item.k + '">' + item.c + '</a>' : item.c;
                    // document.root is set in _Layout.cshtml
                }
            });

            dm.open({ opener: mitem });
            return dm;
        }

        // open on hover menu
        awem.hovMenu({
            hover: $('#linkMenu').find('.mitem'),
            open: openMenu
        });
    });
</script>

<div id="linkMenu">
    <div class="mitem" data-prop="file">File</div>
    <div class="mitem" data-prop="other">Other</div>
</div>

<textarea id="text1" style="width: 100%" placeholder="try mango onion banana"></textarea>
<script>
        $(function () {
            var useAt = 0;
            var minLen = 1;
            var txt = $('#text1');
            var items = [];
            var word = '';
            var fstart;
            var dm;

            init();

            $.get('@Url.Action("GetAllMeals", "Data")', function (res) {
                items = res;
                dm.render();
            });

            function init() {
                if (dm) {
                    dm.destroy();
                }

                dm = awem.dropmenu({
                    dataFunc: function() { return items; },
                    opnlc: txt,
                    hpos: txt,
                    select: function(item) {
                        // func in site.js
                        site.replaceInTexarea(txt[0], (useAt ?  '@@' : '') + item.c, word);
                    },
                    clsempt: 1, //  close on empty items/search results
                    flts: fstart, // filter using startsWith
                    srctxt: txt,
                    gterm: getSrcTerm,
                    combo: 1
                });
            }

            function getSrcTerm() {
                // func in site.js
                word = site.getCaretWord(txt[0]);
                var res = -1;
                if (word.length >= minLen) {
                    if (useAt) {
                        if (word[0] == '@@') {
                            res = word.substring(1);
                        }
                    } else {
                        res = word;
                    }
                }

                return res;
            }

            // settings
            $('#chkUseAt').change(function () {
                useAt = $(this).val() === 'true';
            });

            $('#txtMinLen').change(function () {
                minLen = Number($(this).val());
            });

            $('#chkFstart').change(function () {
                fstart = $(this).val() === 'true';
                init();
            });
        });
</script>