This is a migrated thread and some comments may be shown as answers.

Sub-menu expands vertically between root items

1 Answer 184 Views

This is a migrated thread and some comments may be shown as answers.

Francis asked on 03 Sep 2019, 02:26 PM

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

answered on 05 Sep 2019, 09:28 AM

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.