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

Sub-menu expands vertically between root items

1 Answer 23 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Francis
Top achievements
Rank 1
Veteran
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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
     
 
</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

Sort by
0
Ivan Danchev
Telerik team
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.
Tags
Menu
Asked by
Francis
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or