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.
<ejs-menu id="menu" items="ViewBag.menuItems" cssClass="e-scrollable-menu" enableScrolling="true" beforeOpen="onBeforeOpen"></ejs-menu>
<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">
<ejs-toolbar id="shoppingtoolbar" items="ViewBag.items" created="created"></ejs-toolbar>
</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>// 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.
<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.
<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' onclick="onCloseClick()"></span>
</div>
</div>
<div class="outerButton"> </div>
</div>
</div>
<script>
document.getElementById('hamburger').onclick = function () {
var listObj = ej.base.getInstance(document.getElementById("listview"), ejs.lists.ListView);
var animation = new ej.base.Animation({ duration: 500 });
animation.animate(listObj.element, {
name: 'SlideDown',
begin: function () {
listObj.element.style.display = 'block';
document.getElementById('close').style.display = 'block';
}
});
}
function onSelect(e) {
var listObj = ej.base.getInstance(document.getElementById("listview"), ejs.lists.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.getInstance(document.getElementById("listview"), ejs.lists.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();
}