Menu with split button

[Charles Benoualid]

Hello,

Is it possible to use the horizontal menu with split button instead of regular button to be touch friendly? So i can have a link for each item and a button to open the submenu. Maybe the tree view is better for this task?

I find a way to do it for the first level of the menu with the markup below but i didn't find how to do it with the sub menus

<style scoped>

     #menu > .k-item.empty-split {

        width: 16px;

    }

 

    #menu > .k-item.empty-split > .k-link {

        padding-left: 0;

        padding-right: 0;

    }

</style>   

 

 <ul id="menu">

        <li>Blog

        </li>

        <li class="empty-split">

            <span class="k-link">

                <span class="k-icon k-i-arrow-s"></span>

            </span>

            <ul>

                <li>

                    <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>

                </li>

            </ul>

        </li>

    </ul>

<script type="text/javascript">
        $(function () {
            $("#menu").kendoMenu({
                openOnClick: true
            });
        });
    </script>

[Dimo]

Hello Charles,

Generally, Menu items, which expand child items on hover and perform some action on click are not usable for mouse users either. There are users, which expect Menu subgroups to open on click, that's why they click with the mouse. Executing some script at this point, or navigating to another page may be undesirable.

On the other hand, having a split button inside an expandable Menu item, will result in two dropdown arrow indicators, which in my opinion does not look good.

In conclusion, since the desired behavior is not supported out of the box and its benefit is questionable, my recommendation is to redesign the user experience in this case. One option is to use a TreeView, as you have suggested, another one is to leave the Menu, but root items should only expand child items, not perform another action.

On a side note, please avoid posting duplicate forum threads and support tickets, as this may lead to support overhead and makes tracking of your message history difficult. Thank you for understanding.

Regards,
Dimo
the Telerik team