Search results

Use case scenarios

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

razor
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 create() {
        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">
        @Html.EJS().Toolbar("shoppingtoolbar").Created("create").Items(ViewBag.items).Render()
    </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.

razor
SideBar.cs
@using Syncfusion.EJ2.Navigations;

<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>
    @Html.EJS().Sidebar("default-sidebar").Type(Syncfusion.EJ2.Navigations.SidebarType.Over).Width("220px").ContentTemplate(
            @<div>
                <div class="title-header">
                    <div style="display:inline-block">Menu</div>
                    <span id="close" class="e-icons"></span>
                </div>
                <div class="content-area">
                    @Html.EJS().Accordion("accordionMenu").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Appliances", Content= "#Appliances_Items" },
                        new AccordionAccordionItem { Header= "Accessories", Content= "#Accessories_Items" },
                        new AccordionAccordionItem { Header= "Fashion", Content= "#Fashion_Items" },
                        new AccordionAccordionItem { Header= "Home & Living", Content= "#Home_Living_Items" },
                        new AccordionAccordionItem { Header= "Entertainment", Content= "#Entertainment_Items" }
                    }).Clicked("clicked").Render()
                    <div style="display:none">
                    <!--Accordion sub items-->
                        @Html.EJS().Accordion("Appliances_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Kitchen", Content="#Appliances_Kitchen_Items" },
                        new AccordionAccordionItem { Header= "Washing Machine", Content="#Appliances_Washing_Items" },
                        new AccordionAccordionItem { Header= "Air Conditioners", Content="#Appliances_Conditioners_Items" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Appliances_Kitchen_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Electric Cookers" },
                        new AccordionAccordionItem { Header= "Coffee Makers" },
                        new AccordionAccordionItem { Header= "Blenders" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Appliances_Washing_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Fully Automatic" },
                        new AccordionAccordionItem { Header= "Semi Automatic" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Appliances_Conditioners_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Inverter ACs" },
                        new AccordionAccordionItem { Header= "Split ACs" },
                        new AccordionAccordionItem { Header= "Window ACs" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Accessories_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Mobile", Content="#Accessories_Mobile_Items" },
                        new AccordionAccordionItem { Header= "Computer", Content="#Accessories_Computer_Items" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Accessories_Mobile_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Headphones" },
                        new AccordionAccordionItem { Header= "Memory Cards" },
                        new AccordionAccordionItem { Header= "Power Banks" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Accessories_Computer_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Pendrives" },
                        new AccordionAccordionItem { Header= "External Hard Disks" },
                        new AccordionAccordionItem { Header= "Monitors" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Fashion_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Men" },
                        new AccordionAccordionItem { Header= "Women" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Home_Living_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Furniture" },
                        new AccordionAccordionItem { Header= "Decor" }
                        }).Clicked("clicked").Render()
                    </div>
                    <div style="display:none">
                        @Html.EJS().Accordion("Entertainment_Items").Items(new List<AccordionAccordionItem> {
                        new AccordionAccordionItem { Header= "Televisions" },
                        new AccordionAccordionItem { Header= "Home Theatres" },
                        new AccordionAccordionItem { Header= "Gaming Laptops" }
                        }).Clicked("clicked").Render()
                    </div>
                </div>
            </div>).Render()
    <!-- 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.

razor
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 -->
                @Html.EJS().ListView("listview").DataSource(ViewBag.Items).HeaderTitle("Menu").ShowHeader(true).Select("onSelect").Render()
                <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>
    #listview {
        display: none;
    }

    .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();
}