JavaScript/jQuery Menu - Customize Item Appearance
For a minor customization of Menu items, you can define specific fields in item data objects. For example, the following code generates two root items with two drop-down menu items each. The root items are supplied with icons.
JavaScript
HTML
- var menuItems = [{
- text: 'Upload', icon: 'upload',
- items: [
- { text: 'From your computer' },
- { text: 'From a cloud service' }
- ]
- }, {
- text: 'Share', icon: 'message',
- items: [
- { text: 'Log in with Facebook' },
- { text: 'Log in with Twitter' }
- ]
- }];
- $(function() {
- $("#menuContainer").dxMenu({
- items: menuItems
- });
- });
- <div id="menuContainer"></div>
If you need a more flexible solution, define an itemTemplate.
JavaScript
HTML
- var menuItems = [{
- text: 'Upload',
- items: [
- { text: 'From your computer' },
- { text: 'From a cloud service' }
- ]
- }, {
- text: 'Share',
- items: [
- { text: 'Log in with Facebook' },
- { text: 'Log in with Twitter' }
- ]
- }];
- $(function() {
- $("#menuContainer").dxMenu({
- items: menuItems,
- itemTemplate: function(itemData, itemIndex, itemElement) {
- itemElement.append("<i>" + itemData.text + "</i>");
- }
- });
- });
- <div id="menuContainer"></div>
You can also customize an individual menu item. For this purpose, declare a template for this item as a script and pass its id
to the template field of the item's data object.
HTML
JavaScript
- <script id="individualTemplate" type="text/html">
- <i>Upload</i>
- </script>
- var menuItems = [{
- text: "Upload", icon: "upload",
- template: $("#individualTemplate"),
- items: [
- {
- template: function() {
- return $("<i>").text("From your computer");
- }
- }
- ]
- }];
- $(function() {
- $("#menuContainer").dxMenu({
- items: menuItems
- });
- });
See Also
Feel free to share topic-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.