Getting Started with the Menu
This guide demonstrates how to get up and running with the Kendo UI for jQuery Menu.
After the completion of this guide, you will be able to achieve the following end result:
<ul id="menu">
</ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: {
data: [
{
title: "Furniture", items: [
{ title: "Tables & Chairs" },
{ title: "Sofas" },
{ title: "Occasional Furniture" }
]
},
{
title: "Decor", items: [
{ title: "Bed Linen" },
{ title: "Curtains & Blinds" },
{ title: "Carpets" }
]
}
]
},
dataTextField: "title",
animation: {
open: { effects: "slideIn:up" }
},
});
});
</script>
1. Create an ul Element
First, create an <ul> element on the page from which the Menu component will be initialized.
<ul id="menu"></ul>
2. Initialize the Menu
In this step, you will initialize the Menu from an <ul> element. When you initialize the component, all settings of the component will be provided in the script statement. You have to describe its layout, configuration and event handlers in JavaScript.
<ul id="menu"></ul>
<script>
$("#menu").kendoMenu({});
</script>
3. Configure the DataSource
The Menu items can be loaded from a JSON array of data. To use this approach, configure the dataSource setting.
<ul id="menu"></ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: {
data: [
{
title: "Furniture", items: [
{ title: "Tables & Chairs" },
{ title: "Sofas" },
{ title: "Occasional Furniture" }
]
},
{
title: "Decor", items: [
{ title: "Bed Linen" },
{ title: "Curtains & Blinds" },
{ title: "Carpets" }
]
}
]
}
});
});
</script>
4. Specify the DataTextField
The dataTextField configuration must point to a field in the dataSource data.
<ul id="menu"></ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: {
data: [
{
title: "Furniture", items: [
{ title: "Tables & Chairs" },
{ title: "Sofas" },
{ title: "Occasional Furniture" }
]
},
{
title: "Decor", items: [
{ title: "Bed Linen" },
{ title: "Curtains & Blinds" },
{ title: "Carpets" }
]
}
]
},
dataTextField: "title", // The text of the Menu item will be retrieved from the "title" field in the dataSource.
});
});
</script>
5. Modify the Animations
The Menu enables you to modify the default open and close animations.
<ul id="menu"></ul>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: {
data: [
{
title: "Furniture", items: [
{ title: "Tables & Chairs" },
{ title: "Sofas" },
{ title: "Occasional Furniture" }
]
},
{
title: "Decor", items: [
{ title: "Bed Linen" },
{ title: "Curtains & Blinds" },
{ title: "Carpets" }
]
}
]
},
dataTextField: "title",
animation: {
open: { effects: "slideIn:up" } // When a Menu item is hovered, the Menu will slide up instead of down.
},
});
});
</script>