Use case scenarios in JavaScript (ES5) Menu Bar control

31 Mar 2023 / 7 minutes to read

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.

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

var menuItems = [
        {
            text: 'Appliances',
            items: [
                {
                    text: 'Kitchen',
                    items: [
                        { text: 'Electric Cookers' },
                        { text: 'Coffee Makers' },
                        { text: 'Blenders' },
                        { text: 'Microwave Ovens' }
                    ]
                },
                {
                    text: 'Television',
                    items: [
                        { text: 'Our Exclusive TVs' },
                        { text: 'Smart TVs' },
                        { text: 'Big Screen TVs' }
                    ]
                },
                {
                    text: 'Washing Machine'
                },
                {
                    text: 'Refrigerators'
                },
                {
                    text: 'Air Conditioners',
                    items: [
                        { text: 'Inverter ACs' },
                        { text: 'Split ACs' },
                        { text: 'Window ACs' },
                    ]
                },
                {
                    text: 'Water Purifiers'
                },
                {
                    text: 'Air Purifiers'
                },
                {
                    text: 'Chimneys'
                },
                {
                    text: 'Inverters'
                },
                {
                    text: 'Healthy Living'
                },
                {
                    text: 'Vacuum Cleaners'
                },
                {
                    text: 'Room Heaters'
                },
                {
                    text: 'New Launches'
                }
            ]
        },
        {
            text: 'Accessories',
            items: [
                {
                    text: 'Mobile',
                    items: [
                        { text: 'Headphones' },
                        { text: 'Memory Cards' },
                        { text: 'Power Banks' },
                        { text: 'Mobile Cases' },
                        { text: 'Screen Protectors' }
                    ]
                },
                {
                    text: 'Laptops'
                },
                {
                    text: 'Desktop PC',
                    items: [
                        { text: 'Pendrives' },
                        { text: 'External Hard Disks' },
                        { text: 'Monitors' },
                        { text: 'Keyboards' }
                    ]
                },
                {
                    text: 'Camera',
                    items: [
                        { text: 'Lens' },
                        { text: 'Tripods' }
                    ]
                }
            ]
        },
        {
            text: 'Fashion',
            items: [
                {
                    text: 'Men'
                },
                {
                    text: 'Women'
                }
            ]
        },
        {
            text: 'Home & Living',
            items: [
                {
                    text: 'Furniture'
                },
                {
                    text: 'Decor'
                },
                {
                    text: 'Smart Home Automation'
                },
                {
                    text: 'Dining & Serving'
                }
            ]
        },
        {
            text: 'Entertainment',
            items: [
                {
                    text: 'Televisions'
                },
                {
                    text: 'Home Theatres'
                },
                {
                    text: 'Gaming Laptops'
                }
            ]
        },
        {
            text: 'Contact Us'
        },
        {
            text: 'Help'
        }
    ];

var menuOptions = {
    items: menuItems,
    cssClass: 'e-scrollable-menu',
    enableScrolling: true,
    beforeOpen: function(args) {
        // Restricting sub menu wrapper height
        if (args.parentItem.text === 'Appliances') {
            ej.base.closest(args.element, '.e-menu-wrapper').style.height = '230px';
        }
    }
};

new ej.navigations.Menu(menuOptions, '#menu');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section">
            <ul id="menu"></ul>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

body {
  margin-top: 100px;
  text-align: center;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

#container {
  visibility: hidden;
}

/* Restricting the parent menu wrapper size */
.e-menu-wrapper.e-scrollable-menu:not(.e-menu-popup) {
  width: 492px;
}

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

Source

Preview

index.js

index.html

styles.css

var menuTemplate = '<ul id="menu"></ul>';

//Initialize Toolbar component
var toolbarObj = new ej.navigations.Toolbar({
    created: create,
    items: [
        { template: menuTemplate },
        { prefixIcon: 'em-icons e-shopping-cart', align: 'Right' }
    ]
}, '#shoppingtoolbar');

function create () {
    var data = [
        {
            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']
    };

    //Initialize Menu component
    var menuObj = new ej.navigations.Menu({
        items: data,
        fields: menuFields,
        animationSettings: { effect: 'None' }
    }, '#menu');

    this.refreshOverflow();
}

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section">
            <div class="toolbar-menu-control">
                <div id="shoppingtoolbar"></div>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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;
}

@media only screen and (max-width: 1300px) {
    .toolbar-menu-control {
        width: auto;
    }
}

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

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

var acrdnObj;

// Sidebar Initialization
var defaultSidebar = new ej.navigations.Sidebar({
    width: '220px', type: 'Over', created: created
}, '#default-sidebar');

// Close the Sidebar
document.getElementById('close').onclick = () => {
    defaultSidebar.hide();
};

document.getElementById('hamburger').onclick = () => {
    defaultSidebar.show();
    acrdnObj.refresh();
};

function created() {
    var data = [
        {
            header: 'Appliances',
            content: '<div id="Appliances_Items"></div>',
            subItems: [
                {
                    header: 'Kitchen',
                    content: '<div id="Appliances_Kitchen_Items"></div>',
                    subItems: [
                        { header: 'Electric Cookers' },
                        { header: 'Coffee Makers' },
                        { header: 'Blenders' },
                    ]
                },
                {
                    header: 'Washing Machine',
                    content: '<div id="Appliances_Washing_Items"></div>',
                    subItems: [
                        { header: 'Fully Automatic' },
                        { header: 'Semi Automatic' }
                    ]
                },
                {
                    header: 'Air Conditioners',
                    content: '<div id="Appliances_Conditioners_Items"></div>',
                    subItems: [
                        { header: 'Inverter ACs' },
                        { header: 'Split ACs' },
                        { header: 'Window ACs' },
                    ]
                }
            ]
        },
        {
            header: 'Accessories',
            content: '<div id="Accessories_Items"></div>',
            subItems: [
                {
                    header: 'Mobile',
                    content: '<div id="Accessories_Mobile_Items"></div>',
                    subItems: [
                        { header: 'Headphones' },
                        { header: 'Memory Cards' },
                        { header: 'Power Banks' }
                    ]
                },
                {
                    header: 'Computer',
                    content: '<div id="Accessories_Computer_Items"></div>',
                    subItems: [
                        { header: 'Pendrives' },
                        { header: 'External Hard Disks' },
                        { header: 'Monitors' }
                    ]
                }
            ]
        },
        {
            header: 'Fashion',
            content: '<div id="Fashion_Items"></div>',
            subItems: [
                { header: 'Men' },
                { header: 'Women' }
            ]
        },
        {
            header: 'Home & Living',
            content: '<div id="Home_Living_Items"></div>',
            subItems: [
                { header: 'Furniture' },
                { header: 'Decor'}
            ]
        },
        {
            header: 'Entertainment',
            content: '<div id="Entertainment_Items"></div>',
            subItems: [
                { header: 'Televisions' },
                { header: 'Home Theatres' },
                { header: 'Gaming Laptops' }
            ]
        }
    ];

    //Initialize Accordion component
    acrdnObj = new ej.navigations.Accordion({
        items: data,
        expanding: expand,
        clicked: clicked
    }, '#accordionMenu');
}

//Expanding Event function for Accordion component.
function expand(e) {
    if (e.isExpanded) {
        if (e.element.getElementsByClassName('e-acrdn-content')[0].children[0].classList.contains('e-accordion')) {
            return;
        }
        //Initialize Nested Accordion component
        var nestAcrdn = new ej.navigations.Accordion({
            items: e.item.subItems,
            expanding: expand,
            clicked: clicked
        });

        var elemId = e.element.getElementsByClassName('e-acrdn-content')[0].children[0].id;
        //Render initialized Nested Accordion component
        nestAcrdn.appendTo('#' + elemId);
    }
}

function clicked(e) {
    if (!e.item && !(e.originalEvent.target).closest('.e-acrdn-item').getElementsByClassName('e-tgl-collapse-icon').length) {
        defaultSidebar.hide();
    }
}

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <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>
        <aside id="default-sidebar">
            <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-->
                <div id="accordionMenu"></div>
            </div>
        </aside>
        <!-- main content declaration -->
        <div>
            <div class="main-content">Main content</div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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: absolute;
    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;
}

Mobile view

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

Source

Preview

index.js

index.html

styles.css

ej.base.enableRipple(true);

// Initialize ListView data
var dataSource = [
    {
        text: 'Appliances',
        id: 'list1',
        child: [
            {
                text: 'Kitchen',
                id: 'list1_1',
                child: [
                    { id: 'list1_1_1', text: 'Electric Cookers' },
                    { id: 'list1_1_2', text: 'Coffee Makers' },
                    { id: 'list1_1_3', text: 'Blenders' },
                ]
            },
            {
                text: 'Washing Machine',
                id: 'list1_2',
                child: [
                    { id: 'list1_2_1', text: 'Fully Automatic' },
                    { id: 'list1_2_2', text: 'Semi Automatic' }
                ]
            },
            {
                text: 'Air Conditioners',
                id: 'list1_3',
                child: [
                    { id: 'list1_3_1', text: 'Inverter ACs' },
                    { id: 'list1_3_2', text: 'Split ACs' },
                    { id: 'list1_3_3', text: 'Window ACs' },
                ]
            }
        ]
    },
    {
        text: 'Accessories',
        id: 'list2',
        child: [
            {
                text: 'Mobile',
                id: 'list2_1',
                child: [
                    { id: 'list2_1_1', text: 'Headphones' },
                    { id: 'list2_1_2', text: 'Memory Cards' },
                    { id: 'list2_1_3', text: 'Power Banks' }
                ]
            },
            {
                text: 'Computer',
                id: 'list2_2',
                child: [
                    { id: 'list2_2_1', text: 'Pendrives' },
                    { id: 'list2_2_2', text: 'External Hard Disks' },
                    { id: 'list2_2_3', text: 'Monitors' }
                ]
            }
        ]
    },
    {
        text: 'Fashion',
        id: 'list3',
        child: [
            { id: 'list3_1', text: 'Men' },
            { id: 'list3_2', text: 'Women' }
        ]
    },
    {
        text: 'Home & Living',
        id: 'list4',
        child: [
            { id: 'list4_1', text: 'Furniture' },
            { id: 'list4_2', text: 'Decor'}
        ]
    },
    {
        text: 'Entertainment',
        id: 'list5',
        child: [
            { id: 'list5_1', text: 'Televisions' },
            { id: 'list5_2', text: 'Home Theatres' },
            { id: 'list5_3', text: 'Gaming Laptops' }
        ]
    }
];

//Initialize ListView component
var listObj = new ej.lists.ListView({

    //Set defined data to dataSource property
    dataSource: dataSource,

    //Set header title
    headerTitle: 'Menu',

    //Set true to show header title
    showHeader: true,

    select: onSelect
});

//Render initialized ListView component
listObj.appendTo('#listview');

document.getElementById('hamburger').onclick = () => {
    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';
        }
    });
};

// Close the ListView
document.getElementById('close').onclick = () => {
    listObj.element.style.display = 'none';
    document.getElementById('close').style.display = 'none';
};

function onSelect (e) {
    if (e.data && !e.data.child) {
        listObj.element.style.display = 'none';
        document.getElementById('close').style.display = 'none';
        listObj.refresh();
    }
}

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <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 -->
                    <div id="listview" tabindex="1" style="display: none;"></div>
                    <span id="close" class="e-icons" style="display: none;"></span>
                </div>
            </div>
            <div class="outerButton"> </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

.layoutWrapper {
    line-height: initial;
    border: 1px solid black;
    width: 285px;
    height: 505px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 28px;
    position: relative;
    background-image: linear-gradient(to top, #ffffff, #f5f5f5);
}

.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;
    background-color: white;
}

#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: 257px;
    overflow: hidden;
    top: 43px;
    left: 14px;
    z-index: 1000;
}

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

#close {
    position: absolute;
    right: 25px;
    color: white;
    top: 60px;
    z-index: 1000;
}

Contents

Scrollable menu
Menu in toolbar
Hamburger menu
Mobile view

Contents

Scrollable menu
Menu in toolbar
Hamburger menu
Mobile view

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Use case scenarios in JavaScript (ES5) Menu Bar control

Scrollable menu

Menu in toolbar

Hamburger menu

Mobile view