Search results

Use case scenarios

The following example demonstrates how to integrate Menu with Toolbar component.

tagHelper
ToolBar.cs
<div id='container'>
    <div class="control-section">
        <div class="toolbar-menu-control">
            <div id="shoppingtoolbar"></div>
        </div>
    </div>
</div>
<style>
    body {
        margin-top: 100px;
        text-align: center;
    }

    @@font-face {
        font-family: 'e-menu';
        src:
        url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .em-icons {
        font-family: 'e-menu';
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-transform: none;
        line-height: 2;
    }

    .toolbar-menu-control .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-btn-icon.e-shopping-cart {
        font-size: 20px;
        margin-right: 1px;
    }

    .toolbar-menu-control .e-shopping-cart::before {
        content: '\e7e8';
    }

    .toolbar-menu-control .e-menu-wrapper .e-menu {
        border: none;
    }

    .toolbar-menu-control {
        margin: 45px auto 0;
        max-width: 950px;
    }

    .toolbar-menu-control .e-toolbar .e-toolbar-left .e-toolbar-item.e-template {
        padding: 0;
     }

    .toolbar-menu-control .e-toolbar {
        overflow: visible !important;
     }

     .toolbar-menu-control .e-menu-wrapper {
        margin-right: 160px;
     }

     .toolbar-menu-control .e-hscroll .e-hscroll-content {
          position: static;
      }
</style>
<script>
   var menuItems = [
        {
            header: 'Events',
            subItems: [
                { text: 'Conferences' },
                { text: 'Music' },
                { text: 'Workshops' }
            ]
        },
        {
            header: 'Movies',
            subItems: [
                { text: 'Now Showing' },
                { text: 'Coming Soon' }
            ]
        },
        {
            header: 'Directory',
            subItems: [
                { text: 'Media Gallery' },
                { text: 'Newsletters' }
            ]
        },
        {
            header: 'Queries',
            subItems: [
                { text: 'Our Policy' },
                { text: 'Site Map' },
                { text: '24x7 Support' }
            ]
        },
        { header: 'Services' }
    ];
    //Menu fields definition
    var menuFields = {
        text: ['header', 'text', 'value'],
        children: ['subItems', 'options']
    };
    //Menu model definition
    var menuOptions = {
        items: menuItems,
        fields: menuFields
    };

    function created() {
        new ej.navigations.Menu({ items: menuOptions.items, fields: menuOptions.fields, animationSettings: { effect: 'none' } }, '#menu');
        this.refreshOverflow();
    }
</script>
<div class="control-section">
    <div class="toolbar-menu-control">
        <ejs-toolbar id="shoppingtoolbar" items="ViewBag.items" created="created"></ejs-toolbar>
    </div>
</div>
// ToolBar
public ActionResult ToolBar()
{
    List<ToolbarItem> items = new List<ToolbarItem>()
            {
                new ToolbarItem { Template ="<ul id='menu'></ul>" },
                new ToolbarItem { PrefixIcon ="em-icons e-shopping-cart", Align=Syncfusion.EJ2.Navigations.ItemAlign.Right }
            };

    ViewBag.items = items;
    return View();
}

Hamburger menu

The following example demonstrates the use case of menu with Accordion component integrated in SideBar.

tagHelper
SideBar.cs
<div id='container'>
    <!-- sidebar element declaration -->
    <div class="header">
        <span id="hamburger" class="e-icons menu default"></span>
        <div class="content">Header content</div>
    </div>
    <ejs-sidebar id="default-sidebar" type="Over" width="220px">
        <e-content-template>
            <div class="title-header">
                <div style="display:inline-block">Menu</div>
                <span id="close" class="e-icons"></span>
            </div>
            <div class="content-area">
                <!--Accordion control declaration-->
                <ejs-accordion id="accordionMenu" clicked="clicked">
                    <e-accordion-accordionitems>
                        <e-accordion-accordionitem header="Appliances" , content="#Appliances_Items"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Accessories" , content="#Accessories_Items"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Fashion" , content="#Fashion_Items"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Home & Living" , content="#Home_Living_Items"></e-accordion-accordionitem>
                        <e-accordion-accordionitem header="Entertainment" , content="#Entertainment_Items"></e-accordion-accordionitem>
                    </e-accordion-accordionitems>
                </ejs-accordion>
                <div style="display:none">
                <!--Accordion sub items-->
                    <ejs-accordion id="Appliances_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Kitchen" , content="#Appliances_Kitchen_Items"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Washing Machine" , content="#Appliances_Washing_Items"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Air Conditioners" , content="#Appliances_Conditioners_Items"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Appliances_Kitchen_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Electric Cookers"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Coffee Makers"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Blenders"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Appliances_Washing_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Fully Automatic"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Semi Automatic"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Appliances_Conditioners_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Inverter ACs"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Split ACs"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Window ACs"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Accessories_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Mobile" , content="#Accessories_Mobile_Items"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Computer" , content="#Accessories_Computer_Items"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Accessories_Mobile_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Headphones"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Memory Cards"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Power Banks"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Accessories_Computer_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Pendrives"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="External Hard Disks"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Monitors"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Fashion_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Men"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Women"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Home_Living_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Furniture"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Decor"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
                <div style="display:none">
                    <ejs-accordion id="Entertainment_Items" clicked="clicked">
                        <e-accordion-accordionitems>
                            <e-accordion-accordionitem header="Televisions"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Home Theatres"></e-accordion-accordionitem>
                            <e-accordion-accordionitem header="Gaming Laptops"></e-accordion-accordionitem>
                        </e-accordion-accordionitems>
                    </ejs-accordion>
                </div>
            </div>
        </e-content-template>
    </ejs-sidebar>
    <!-- main content declaration -->
    <div>
        <div class="main-content">Main content</div>
    </div>
</div>
<style>
    body {
        margin: 0;
    }

    .header {
        width: 100%;
        background-color: #7b8cfb;
    }

        #default-sidebar,
        .header .content {
            background-color: #7b8cfb;
            color: white;
            border: none;
        }

        .header .content {
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }

    .main-content {
        text-align: center;
        font-size: 20px;
        padding: 100px 15px;
    }

    #default-sidebar .close-btn:hover {
        color: rgba(0, 0, 0, .87);
        background-color: #fafafa;
    }

    #hamburger.menu {
        font-size: 25px;
        cursor: pointer;
        float: left;
        line-height: 50px;
        position: relative;
        z-index: 1000;
        left: 25px;
        color: white;
    }

        #hamburger.menu:before {
            content: '\e99a';
        }

    #close:before {
        content: "\e945";
    }

    .title-header {
        text-align: center;
        font-size: 18px;
        padding: 15px 15px 35px;
    }

    .e-sidebar .title-header #close {
        cursor: pointer;
        line-height: 25px;
        float: right;
    }

    .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
        padding: 0px;
    }

    .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
        padding: 0px;
    }
</style>

<script>
    // Close the Sidebar
    document.getElementById('close').onclick = function () {
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        defaultSidebar.hide();
    };

    document.getElementById('hamburger').onclick = function () {
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        defaultSidebar.show();
    };

    function clicked(e) {
        if (!(e.originalEvent.target.closest('.e-acrdn-item').getElementsByClassName('e-tgl-collapse-icon').length)) {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.hide();
        }
    }
</script>
// SideBar
public ActionResult SideBar()
{
    return View();
}

Mobile view

The following example demonstrates the use case of Menu in Mobile mode by using ListView component with hamburger.

tagHelper
ListView.cs
<div id='container'>
    <div class="layoutWrapper">
        <div class="speaker">
            <div class="camera"></div>
        </div>
        <div class="layout">
            <div id="container">
                <div id="header">
                    <span id="hamburger" class="e-icons menu default"></span>
                    <div class="content">Header</div>
                </div>
                <!-- ListView element -->
                <ejs-listview id="listview" tabindex="1" style="display: none" dataSource="ViewBag.items" headerTitle="Menu" showHeader="true" select="onSelect"></ejs-listview>
                <span id='close' style="display: none" class='e-icons'></span>
            </div>
        </div>
        <div class="outerButton"> </div>
    </div>
</div>
<script>
    document.getElementById('hamburger').onclick = function () {
        var listObj = document.getElementById("listview").ej2_instances[0];
        var animation = new ej.base.Animation
            ({ duration: 500 });
        animation.animate(listObj.element, {
            name: 'SlideDown',
            begin: function (args) {
                listObj.element.style.display = 'block';
                document.getElementById('close').style.display = 'block';
            }
        });
    };

    function onSelect(e) {
        var listObj = document.getElementById("listview").ej2_instances[0];
        if (e.data && !e.data.child) {
            listObj.element.style.display = 'none';
            document.getElementById('close').style.display = 'none';
            listObj.refresh();
        }
    }

</script>
@section Scripts {
    <script>
        document.getElementById('close').onclick = function () {
            var listObj = document.getElementById("listview").ej2_instances[0];
            listObj.element.style.display = 'none';
            document.getElementById('close').style.display = 'none';
        }
    </script>
}
<style>
    .layoutWrapper {
        line-height: initial;
        border: 1px solid black;
        width: 285px;
        height: 505px;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 28px;
        position: relative;
    }

    .layoutWrapper .speaker {
        border: 1px solid black;
        border-radius: 5px;
        width: 33.33333333%;
        height: 5px;
        margin: 15px auto 0px auto;
        position: relative;
    }

    .layoutWrapper .outerButton {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        border-radius: 50%;
        position: absolute;
        bottom: calc(0% + 10px);
        left: calc(50% - 15px);
    }

    .layoutWrapper .camera {
        position: absolute;
        left: calc(-15% - 10px);
        top: -100%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid black;
    }

    .layoutWrapper .layout {
        border: 1px solid black;
        margin: 20px 13px 0px 13px;
    }

    .layout #container {
        height: 405px;
    }

    #header {
        width: 100%;
        background-color: #7b8cfb;
    }

    .layout .e-listview .e-list-header,
    .layout .e-listview .e-but-back {
        background-color: #7b8cfb;
        color: white;
    }

    #header .content {
        background-color: #7b8cfb;
        color: white;
        border: none;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
    }

    #hamburger.menu {
        font-size: 25px;
        cursor: pointer;
        float: left;
        line-height: 50px;
        position: absolute;
        z-index: 1000;
        left: 25px;
        color: white;
    }

    #hamburger.menu:before {
        content: '\e7f6';
    }

    #listview {
        position: absolute;
        width: 254px;
        overflow: hidden;
        top: 43px;
        left: 14px;
        z-index: 1000;
    }

    #close:before {
        content: "\e945";
    }

    #close {
        position: absolute;
        right: 25px;
        top: 58px;
        z-index: 10000;
        color: white;
    }
</style>
// ListView
public ActionResult ListView()
{
    List<object> Items = new List<object>() {
                new {
                    text = "Appliances",
                    id = "list1",
                    child = new List<object>() {
                        new {
                            text = "Kitchen",
                            id = "list1_1",
                            child = new List<object>() {
                                new { id = "list1_1_1" , text= "Electric Cookers" },
                                new { id = "list1_1_2" , text= "Coffee Makers" },
                                new { id = "list1_1_3" , text= "Blenders" }
                            }
                        },
                        new {
                            text = "Washing Machine",
                            id = "list1_2",
                            child = new List<object>() {
                                new { id = "list1_2_1" , text= "Fully Automatic" },
                                new { id = "list1_2_2" , text= "Semi Automatic" }
                            }
                        },
                        new {
                            text = "Air Conditioners",
                            id = "list1_3",
                            child = new List<object>() {
                                new { id = "list1_3_1" , text= "Inverter ACs" },
                                new { id = "list1_3_2" , text= "Split ACs" },
                                new { id = "list1_3_3" , text= "Window ACs" }
                            }
                        }
                    }
                },
                new {
                    text = "Accessories",
                    id = "list2",
                    child = new List<object>() {
                        new {
                            text = "Mobile",
                            id = "list2_1",
                            child = new List<object>() {
                                new { id = "list2_1_1", text= "Headphones" },
                                new { id = "list2_1_2", text= "Memory Cards" },
                                new { id = "list2_1_3",  text= "Power Banks" }
                            }
                        },
                        new {
                            text = "Computer",
                            id = "list2_2",
                            child = new List<object>() {
                                new {  id = "list2_2_1", text= "Pendrives" },
                                new {  id = "list2_2_2", text= "External Hard Disks" },
                                new {  id = "list2_2_3", text= "Monitors" }
                            }
                        }
                    }
                },
                new {
                    text = "Fashion",
                    id =  "list3",
                    child = new List<object>() {
                        new { id= "list3_1", text = "Men" },
                        new { id= "list3_2", text = "Women" }
                        }
                },
                new {
                    text = "Home & Living",
                    id = "list4",
                    child = new List<object>() {
                        new { id= "list4_1", text = "Furniture" },
                        new { id= "list4_2", text = "Decor" }
                        }
                },
                  new {
                    text = "Entertainment",
                    id = "list5",
                    child = new List<object>() {
                        new { id= "list5_1", text = "Televisions" },
                        new { id= "list5_2", text = "Home Theatres" },
                        new { id= "list5_3", text = "Gaming Laptops" },
                        }
                }
            };
    ViewBag.Items = Items;
    return View();
}