function addSubCategories($item)
{
$footwear = new \Kendo\UI\MenuItem('Footwear');
$footwear->addItem(new \Kendo\UI\MenuItem('Leisure Trainers'), new \Kendo\UI\MenuItem('Running Shoes'), new \Kendo\UI\MenuItem('Outdoor Footwear'), new \Kendo\UI\MenuItem('Sandals/Flip Flops'), new \Kendo\UI\MenuItem('Footwear Accessories'));
$leisure = new \Kendo\UI\MenuItem('Leisure Clothing');
$leisure->addItem(new \Kendo\UI\MenuItem('T-Shirts'), new \Kendo\UI\MenuItem('Hoodies & Sweatshirts'), new \Kendo\UI\MenuItem('Jackets'), new \Kendo\UI\MenuItem('Pants'), new \Kendo\UI\MenuItem('Shorts'));
$sports = new \Kendo\UI\MenuItem('Sports Clothing');
$sports->addItem(new \Kendo\UI\MenuItem('Football'), new \Kendo\UI\MenuItem('Basketball'), new \Kendo\UI\MenuItem('Golf'), new \Kendo\UI\MenuItem('Tennis'), new \Kendo\UI\MenuItem('Swimwear'));
$accessories = new \Kendo\UI\MenuItem('Accessories');
$item->addItem($footwear, $leisure, $sports, $accessories);
}
<?php
$menu = new \Kendo\UI\Menu('horizontalMenu');
$first = new \Kendo\UI\MenuItem("First Item");
$first->addItem(new \Kendo\UI\MenuItem("Sub Item 1"), new \Kendo\UI\MenuItem("Sub Item 2"), new \Kendo\UI\MenuItem("Sub Item 3"), new \Kendo\UI\MenuItem("Sub Item 4"));
$menu->addItem($first);
$second = new \Kendo\UI\MenuItem("Second Item");
$second->addItem(new \Kendo\UI\MenuItem("Sub Item 1"), new \Kendo\UI\MenuItem("Sub Item 2"), new \Kendo\UI\MenuItem("Sub Item 3"), new \Kendo\UI\MenuItem("Sub Item 4"));
$menu->addItem($second);
$third = new \Kendo\UI\MenuItem("Third Item");
$third->addItem(new \Kendo\UI\MenuItem("Sub Item 1"), new \Kendo\UI\MenuItem("Sub Item 2"), new \Kendo\UI\MenuItem("Sub Item 3"), new \Kendo\UI\MenuItem("Sub Item 4"));
$menu->addItem($third);
$fourth = new \Kendo\UI\MenuItem("Fourth Item");
$fourth->addItem(new \Kendo\UI\MenuItem("Sub Item 1"), new \Kendo\UI\MenuItem("Sub Item 2"), new \Kendo\UI\MenuItem("Sub Item 3"), new \Kendo\UI\MenuItem("Sub Item 4"));
$menu->addItem($fourth);
$fifth = new \Kendo\UI\MenuItem("Fifth Item");
$fifth->addItem(new \Kendo\UI\MenuItem("Sub Item 1"), new \Kendo\UI\MenuItem("Sub Item 2"), new \Kendo\UI\MenuItem("Sub Item 3"), new \Kendo\UI\MenuItem("Sub Item 4"));
$menu->addItem($fifth);
echo $menu->render();
?>
<script>
$(document.body).keydown(function(e) {
if (e.altKey && e.keyCode == 87) {
$("#verticalMenu").focus();
} else if (e.altKey && e.keyCode == 81) {
$("#horizontalMenu").focus();
}
});
</script>
<li>
<input id="delay" name="animation" type="text" value="100" class="k-textbox" /> <label for="delay">open/close delay</label>
</li>
</ul>
</div>
<?php
$menu = new \Kendo\UI\Menu('menu');
$menu->attr('style', 'margin-right: 220px');
$furniture = new \Kendo\UI\MenuItem('Furniture');
$furniture->addItem(new \Kendo\UI\MenuItem('Tables & Chairs'), new \Kendo\UI\MenuItem('Sofas'), new \Kendo\UI\MenuItem('Occasional Furniture'), new \Kendo\UI\MenuItem('Childerns Furniture'), new \Kendo\UI\MenuItem('Beds'));
$decor = new \Kendo\UI\MenuItem('Decor');
$decor->addItem(new \Kendo\UI\MenuItem('Bed Linen'), new \Kendo\UI\MenuItem('Throws'), new \Kendo\UI\MenuItem('Curtains & Blinds'), new \Kendo\UI\MenuItem('Rugs'), new \Kendo\UI\MenuItem('Carpets'));
$storage = new \Kendo\UI\MenuItem('Storage');
$storage->addItem(new \Kendo\UI\MenuItem('Wall Shelving'), new \Kendo\UI\MenuItem('Kids Storage'), new \Kendo\UI\MenuItem('Baskets'), new \Kendo\UI\MenuItem('Multimedia Storage'), new \Kendo\UI\MenuItem('Floor Shelving'), new \Kendo\UI\MenuItem('Toilet Roll Holders'), new \Kendo\UI\MenuItem('Storage Jars'), new \Kendo\UI\MenuItem('Drawers'), new \Kendo\UI\MenuItem('Boxes'));
$lights = new \Kendo\UI\MenuItem('Lights');
$lights->addItem(new \Kendo\UI\MenuItem('Ceiling'), new \Kendo\UI\MenuItem('Table'), new \Kendo\UI\MenuItem('Floor'), new \Kendo\UI\MenuItem('Shades'), new \Kendo\UI\MenuItem('Wall Lights'), new \Kendo\UI\MenuItem('Spotlights'), new \Kendo\UI\MenuItem('Push Light'), new \Kendo\UI\MenuItem('String Lights'));
$menu->addItem($furniture, $decor, $storage, $lights);
echo $menu->render();
?>
<script>
$(document).ready(function() {
var original = $("#menu").clone(true);
original.find(".k-state-active").removeClass("k-state-active");
$(".configuration input").change( function() {
var menu = $("#menu"),
clone = original.clone(true);
echo $menu->render();
?>
</div>
<div class="demo-section">
<h3>Menu with sprites</h3>
<?php
$menu = new \Kendo\UI\Menu('menu-sprites');
$brazil = new \Kendo\UI\MenuItem("Brail");
$brazil->spriteCssClass("brazilFlag");
$brazil->addItem(array("text" => "History", "spriteCssClass" => "historyIcon"), array("text" => "Geography", "spriteCssClass" => "geographyIcon"));
$india = new \Kendo\UI\MenuItem("India");
$india->imageUrl("indiaFlag");
$india->addItem(array("text" => "Top News", "spriteCssClass" => "historyIcon"), array("text" => "Photo Galleries", "spriteCssClass" => "geographyIcon"));
$netherlands = new \Kendo\UI\MenuItem("Netherlands");
$netherlands->spriteCssClass("netherlandsFlag");
$netherlands->addItem(array("text" => "Top News", "spriteCssClass" => "historyIcon"), array("text" => "Photo Galleries", "spriteCssClass" => "geographyIcon"));
$menu->dataSource(array($brazil, $india, $netherlands));
echo $menu->render();
?>
</div>
<style scoped>
.demo-section {
width: 500px;
}
.demo-section h3 {
font-weight: normal;
padding-bottom: 10px;
}
<div id="template" style="padding: 10px;">
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
<button class="k-button">See full list</button>
</div>
<?php
$stores->endContent();
$menu->addItem($stores);
$menu->addItem(new \Kendo\UI\MenuItem('Blog'), new \Kendo\UI\MenuItem('Company'), new \Kendo\UI\MenuItem('Events'));
$news = new \Kendo\UI\MenuItem('News');
$news->enabled(false);
$menu->addItem($news);
echo $menu->render();
?>
</div>
<style scoped>
#megaStore {
width: 600px;
margin: 30px auto;
padding-top: 120px;
background: url('../content/web/menu/header.jpg') no-repeat 0 0;
}
#menu h2 {
font-size: 1em;