Responsive Design Kendo UI Menu

[Naresh]

I am using Kendo UI to display the dynamic menu. How do I make this as Responsive design menu without using kendoResponsivePanel? Do you have any other menu control to have this functionality? Here is my code snippet. Please advise.

@model ghi.Domain.Models.Menu.MenuItemList
@using Kendo.Mvc.UI.Fluent
@using ghi.Domain.Models.Menu
@functions{
    public void addChildren(MenuItemBuilder builder, MenuData item, MenuItemList items)
    {
        var children = items.data.Where(m => m.MenuParentID == item.MenuID);
        if (children != null)
        {
            builder.Items(menuItems =>
            {
                foreach (var child in children)
                {
                    var menuItem = menuItems.Add().Text(child.MenuText);
                    addChildren(menuItem, child, items);
                }
            });

        }
    }
}

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu =>
    {
        menu.Add().Text("Home");
        foreach (var item in Model.data.Where(m => m.MenuParentID == null || m.MenuParentID == 0))
        {
            var builder = menu.Add().Text(item.MenuText);
            addChildren(builder, item, Model);
        }
    }))

[Bozhidar]

Hi,

There isn't a built-in option to make Menu responsive, without using the responsive panel shown here: http://demos.telerik.com/kendo-ui/responsive/responsivepanel.

If you don't want to use the responsive panel you will need to write some media queries that will cover your needs.

Another option is to use Bootstrap and its built-in media queries if they can cover your case.

Also, you can check Kendo UI ToolBar: http://demos.telerik.com/kendo-ui/toolbar/index - if it can work for you - it has built-in responsive behavior, but of course it is not equivalent of the Menu, but in some cases you can use it instead.

Regards,
Bozhidar
Telerik by Progress

[Naresh]

Thank you for the response. Can you please send me sample code to make kendo ui menu using media queries as responsive?

[Bozhidar]

Hi,

You can check the following dojo example for a simple example of how to use Media Queries with Kendo UI Menu: http://dojo.telerik.com/@ruzhenov/AQOnU/2

Use the dojo split bar in order to change the example width in order to activate different media queries conditions. In a normal state you will have the full menu items and red background. If the width of the browser/wrapper is 1024px and bellow, you will have red background and the last item of the menu will be hidden. If the width is 768px and bellow you will have blue background and the last two items of the menu will be hidden. If the width is 460px or bellow the background will be yellow and the menu will display just the first item and  on hover will show the other items.

It is a simple example and it can be extended based on your requirements - using different media queries to show the menu most important links or to make it behave as you like.

Bellow are a few resources explaining how to use Media Queries:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/

Belllow are also a few resources explaining how to use jQuery based on Media Queries, so except CSS to be able to add some client functionality based on the Media Queries:

http://www.wiliam.com.au/wiliam-blog/jquery-and-css-media-queries

https://dzone.com/articles/checking-media-queries-jquery

http://fellowtuts.com/jquery/jquery-functions-with-css-media-queries-for-responsive-website/

https://www.fourfront.us/blog/jquery-window-width-and-media-queries

Regards,
Bozhidar
Telerik by Progress

[ksuh]

The link http://demos.telerik.com/kendo-ui/responsive/responsivepanel doesn't work anymore.  Any chance it could be fixed.

[Martin]

Hello Kwang,

Here is the correct link to the ResponsivePanel demo.

Regards,
Martin
Progress Telerik