Hi,
I'm wondering if there is a way to expand sub-menu items between the root items when the menu has a vertical orientation
For example for the menu below the space between products and blog would expand to accommodate the sub-menu. Would another control be better for this?
<!DOCTYPE html><html><head> <base href="https://demos.telerik.com/kendo-ui/menu/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script> </head><body> <ul id="menu"> <li> Products <ul> <li> Furniture <ul> <li>Tables & Chairs</li> <li>Sofas</li> <li>Occasional Furniture</li> <li>Children's Furniture</li> <li>Beds</li> </ul> </li> <li> Decor <ul> <li>Bed Linen</li> <li>Throws</li> <li>Curtains & Blinds</li> <li>Rugs</li> <li>Carpets</li> </ul> </li> <li> Storage <ul> <li>Wall Shelving</li> <li>Kids Storage</li> <li>Baskets</li> <li>Multimedia Storage</li> <li>Floor Shelving</li> <li>Toilet Roll Holders</li> <li>Storage Jars</li> <li>Drawers</li> <li>Boxes</li> </ul> </li> <li> Lights <ul> <li>Ceiling</li> <li>Table</li> <li>Floor</li> <li>Shades</li> <li>Wall Lights</li> <li>Spotlights</li> <li>Push Light</li> <li>String Lights</li> </ul> </li> </ul> </li> <li> Blog </li> <li> Company </li> <li> Events </li> <li disabled="disabled"> News </li> </ul> <style> </style> <script> $(document).ready(function() { $("#menu").kendoMenu({ orientation: "vertical" }); }); </script> <style> .k-menu-vertical /* for all horizontal menus */{ display: inline-block;} .k-menu .k-i-arrow-60-right { display: none;} </style></body></html>1 Answer, 1 is accepted
0
Hi Francis,
While it is possible to achieve such behavior, for example by applying the following CSS:
.k-menu .k-item .k-animation-container {
position: static !important;
}the Menu is not designed to display its sub-menus in such manner and changing its sub-menus positioning could potentially lead to unexpected/unwanted behavior in certain scenarios.
We would suggest you to consider using a different widget: the PanelBar. You can check its functionality in the demos.
Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.