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

Responsive Design Kendo UI Menu

5 Answers 872 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Naresh
Top achievements
Rank 1
Naresh asked on 05 Jan 2017, 08:43 PM

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);
        }
    }))

5 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 09 Jan 2017, 08:30 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Naresh
Top achievements
Rank 1
answered on 09 Jan 2017, 01:23 PM
Thank you for the response. Can you please send me sample code to make kendo ui menu using media queries as responsive?
0
Bozhidar
Telerik team
answered on 11 Jan 2017, 08:51 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
ksuh
Top achievements
Rank 1
Veteran
answered on 11 Nov 2020, 01:39 PM
The link http://demos.telerik.com/kendo-ui/responsive/responsivepanel doesn't work anymore.  Any chance it could be fixed.
0
Martin
Telerik team
answered on 13 Nov 2020, 12:36 PM

Hello Kwang,

Here is the correct link to the ResponsivePanel demo.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Menu
Asked by
Naresh
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Naresh
Top achievements
Rank 1
ksuh
Top achievements
Rank 1
Veteran
Martin
Telerik team
Share this question
or