Use case scenarios
17 Feb 202224 minutes to read
Scrollable menu
The menu component supports horizontal and vertical scrolling to render large menus and submenus in an adaptive way. This can be achieved by enabling the enableScrolling property and by restricting the corresponding menu/submenu size.
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).EnableScrolling(true).CssClass('e-scrollable-menu').BeforeOpen('onBeforeOpen').Render()
<script>
function onBeforeOpen(args) {
// Restricting sub menu wrapper height
if (args.parentItem.text === 'Appliances') {
ej.base.closest(args.element, '.e-menu-wrapper').style.height = '230px';
}
}
</script>
<style>
body {
margin-top: 100px;
text-align: center;
}
/* Restricting the parent menu wrapper size */
.e-menu-wrapper.e-scrollable-menu:not(.e-menu-popup) {
width: 492px;
}
</style>public ActionResult Scrollable()
{
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "Appliances",
items = new List<object>()
{
new {
text= "Kitchen",
items = new List<object>()
{
new { text= "Electric Cookers" },
new { text= "Coffee Makers" },
new { text= "Blenders" },
new { text= "Microwave Ovens" }
}
},
new {
text= "Television",
items = new List<object>()
{
new { text= "Our Exclusive TVs" },
new { text= "Smart TVs" },
new { text= "Big Screen TVs" }
}
},
new { text= "Washing Machine" },
new {
text= "Refrigerators",
items = new List<object>()
{
new { text= "Inverter ACs" },
new { text= "Split ACs" },
new { text= "Window ACs" }
}
},
new { text= "Air Conditioners" },
new { text= "Water Purifiers" },
new { text= "Air Purifiers" },
new { text= "Chimneys" },
new { text= "Inverters" },
new { text= "Healthy Living" },
new { text= "Vacuum Cleaners" },
new { text= "Room Heaters" },
new { text= "New Launches" }
}
});
menuItems.Add(new
{
text = "Accessories",
items = new List<object>()
{
new {
text= "Mobile",
items = new List<object>()
{
new { text= "Headphones" },
new { text= "Memory Cards" },
new { text= "Power Banks" },
new { text= "Mobile Cases" },
new { text= "Screen Protectors" }
}
},
new { text= "Laptops" },
new {
text= "Desktop PC",
items = new List<object>()
{
new { text= "Pendrives" },
new { text= "External Hard Disks" },
new { text= "Monitors" },
new { text= "Keyboards" }
}
},
new {
text= "Camera",
items = new List<object>()
{
new { text= "Lens" },
new { text= "Tripods" }
}
}
}
});
menuItems.Add(new
{
text = "Fashion",
items = new List<object>()
{
new { text = "Men" },
new { text = "Women" }
}
});
menuItems.Add(new
{
text = "Home & Living",
items = new List<object>()
{
new { text= "Furniture" },
new { text= "Decor" },
new { text= "Smart Home Automation" },
new { text= "Dining & Serving" }
}
});
menuItems.Add(new
{
text = "Entertainment",
items = new List<object>()
{
new { text= "Televisions" },
new { text= "Home Theatres" },
new { text= "Gaming Laptops" }
}
});
menuItems.Add(new
{
text = "Contact Us"
});
menuItems.Add(new
{
text = "Help"
});
ViewBag.menuItems = menuItems;
return View();
}Menu in toolbar
The following example demonstrates how to integrate Menu with Toolbar component.
<div class="control-section">
<div class="toolbar-menu-control">
@Html.EJS().Toolbar("shoppingtoolbar").Created("create").Items(ViewBag.items).Render()
</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>// 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.
@using Syncfusion.EJ2
@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 = ej.base.getComponent(document.getElementById("default-sidebar"), "sidebar");
defaultSidebar.hide();
};
document.getElementById('hamburger').onclick = function () {
var defaultSidebar = ej.base.getComponent(document.getElementById("default-sidebar"), "sidebar");
defaultSidebar.show();
};
function clicked(e) {
if (!(e.originalEvent.target.closest('.e-acrdn-item').getElementsByClassName('e-tgl-collapse-icon').length)) {
var defaultSidebar = ej.base.getComponent(document.getElementById("default-sidebar"), "sidebar");
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.
<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' onclick="onCloseClick()"></span>
</div>
</div>
<div class="outerButton"> </div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var listObj = ej.base.getComponent(document.getElementById("listview"), "listview");
listObj.element.style.display = 'none';
});
document.getElementById('hamburger').onclick = function () {
var listObj = ej.base.getComponent(document.getElementById("listview"), "listview");
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 = ej.base.getComponent(document.getElementById("listview"), "listview");
if (e.data && !e.data.child) {
listObj.element.style.display = 'none';
document.getElementById('close').style.display = 'none';
listObj.refresh();
}
}
function onCloseClick() {
var listObj = ej.base.getComponent(document.getElementById("listview"), "listview");
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: '\e99a';
}
#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>// Mobile view data
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();
}