Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
const SUBMENU_HEIGHT = 200;
let submenuMaxHeight = 0;
$('#menu').dxMenu({
dataSource: menuData,
hideSubmenuOnMouseLeave: false,
onSubmenuShowing: ({ submenuContainer }) => {
$(submenuContainer).css('maxHeight', submenuMaxHeight || '');
},
onItemClick(e) {
if (!e.itemData.items) {
DevExpress.ui.notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
}
},
}).dxMenu('instance');
$('#limit-height').dxCheckBox({
value: false,
text: `Limit submenu height to ${SUBMENU_HEIGHT}px`,
onValueChanged(data) {
submenuMaxHeight = data.value ? SUBMENU_HEIGHT : 0;
},
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.7/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="content">
<div class="label">Catalog:</div>
<div id="menu"></div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div id="limit-height"></div>
</div>
</div>
</div>
</body>
</html>
.demo-container {
display: flex;
}
.label {
font-size: 22px;
padding-bottom: 24px;
}
.content {
flex-grow: 1;
width: 100%;
min-width: 500px;
overflow: clip;
}
.options {
display: flex;
flex-direction: column;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
const menuData = [
{
text: 'Electronics',
items: [
{
text: 'Computers',
items: [
{
text: 'Desktops',
},
{
text: 'Laptops',
},
{
text: 'Tablets',
},
{
text: 'Monitors',
},
{
text: 'Printers',
},
{
text: 'Scanners',
},
{
text: 'Servers',
},
{
text: 'Network Devices',
},
{
text: 'Warranties',
},
{
text: 'Projectors & Screens'
},
{
text: 'Computer Accessories',
},
]
},
{
text: 'Cell Phones',
items: [
{
text: 'Home & Office Phones',
},
{
text: 'Smart Phones & PDAs',
},
{
text: 'Senior Cell Phones'
},
{
text: 'Mobile Broadband Devices',
},
{
text: 'Cell Phone Accessories',
},
]
},
{
text: 'Camera & Photo',
items: [
{
text: 'Action Cameras',
},
{
text: 'Camcorders',
},
{
text: 'Digital Cameras',
},
{
text: 'Digital Picture Frames',
},
{
text: 'Film Cameras',
},
{
text: 'Professional Video Cameras',
},
{
text: 'Flashes',
},
{
text: 'Lenses',
},
{
text: 'Photo Printers',
},
{
text: 'Film & Slide Scanners',
},
{
text: 'Slide Projectors',
},
{
text: 'Slide Viewers',
},
{
text: 'Tripods & Monopods',
},
{
text: 'Underwater Video & Photography',
},
{
text: 'Camera Accessories',
},
]
},
{
text: 'Audio',
items: [
{
text: 'Boomboxes',
},
{
text: 'DVD & CD Player Bags',
},
{
text: 'Hi-Fi & Home Audio Accessories',
},
{
text: 'Media Streaming Devices',
},
{
text: 'MP3 & Digital Media Players',
},
{
text: 'MP3 Player Accessories',
},
{
text: 'Personal Cassette Players',
},
{
text: 'Personal CD Players',
},
{
text: 'Compact Stereos',
},
{
text: 'Speakers',
},
]
},
{
text: 'Home Appliances',
items: [
{
text: 'Air Conditioners',
},
{
text: 'Coffee Machines',
},
{
text: 'Fans',
},
{
text: 'Lamps',
},
{
text: 'Microwaves',
},
{
text: 'Refrigerators',
},
{
text: 'Washers & Dryers'
},
{
text: ' Water Heaters',
},
{
'text': 'Vacuum'
},
{
text: 'Steaming & Ironing'
}
]
},
]
},
{
text: 'Entertainment',
items: [
{
text: 'Films & Music',
items: [
{
text: 'TV Shows',
},
{
text: 'DVD',
},
{
text: 'Blu-ray',
},
{
text: 'CD',
},
{
text: 'SACD',
},
{
text: 'Vinyl',
},
{
text: 'Cassette'
},
{
text: 'Musical Instruments',
},
{
text: 'DJ Equipment'
}
]
},
{
text: 'Games & Toys',
items: [
{
text: 'PC Games',
},
{
text: 'Virtual Reality',
},
{
text: 'Boxed Games',
},
{
text: 'Download Games',
},
{
text: 'Handheld Game Systems'
},
{
text: 'Legacy Systems',
},
{
text: 'Cards',
},
]
},
]
},
{
text: 'Healthcare & Living',
items: [
{
text: 'Sports & Outdoors',
items: [
{
text: 'Camping',
},
{
text: 'Fitness',
},
{
text: 'Football',
},
{
text: 'Cycling',
},
{
text: 'Running',
},
{
text: 'Sport Electronics',
},
{
text: 'Sport Apparel'
},
{
text: 'Trainers & Tennis Shoes',
},
]
},
{
text: 'Beauty',
items: [
{
text: 'Bath & Shower',
},
{
text: 'Skin Care',
},
{
text: 'Hair Care',
},
{
text: 'Nail Care',
},
{
text: 'Make-up'
},
{
text: 'Fragrance',
},
{
text: 'Salon & SPA Equipment',
},
{
text: 'Tools & Accessories',
},
]
},
{
text: 'Fashion',
items: [
{
text: 'Clothing',
},
{
text: 'Jewellery',
},
{
text: 'Shoes',
},
{
text: 'Handbags & Shoulder Bags',
},
{
text: 'Watches',
},
{
text: 'Accessories',
}
]
}
]
},
];