This is a migrated thread and some comments may be shown as answers.
Menu Wrapping on Mobile Devices
1 Answer 134 Views
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 30 May 2012, 10:10 PM
Hi,

Can the menu exist as one horizontal list that does not wrap to consume more page/screen real estate than is required?  The problem is this 

    | browser width boundary
| menu item 1 | menu item 2 |
| menu item 3 | menu item 4 |
      | browser width boundary

I desire this:
    | browser width boundary
    |
| menu item 1 | menu item 2 | menu item 3 | menu item 4 | 
            |
    | browser width boundary

Is it possible?  One thought, for horizontal scrolling due to the inevitable overflow that this type of layout would create, is to wrap the menu with a simple div and use the iScroll library (http://cubiq.org/iscroll-4) for the horizontal scrolling of menu items, like this: 

myScroll = new iScroll('wrapper'); // 'wrapper' is the div element with id='wrapper'


Would this type of solution work for the Kendo UI menu control?

Dan

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 04 Jun 2012, 01:42 PM
Hello Daniel,

This can be done by using our Kendo Mobile Scroller (which is included in all versions of the suite to support scrolling on mobile devices) - it can be initialized on any container. However, there's one downside - for any scroller - ours or iScroll you will need overflow: hidden on the menu container and the menu doesn't detach its sub menus and they will get hidden. One workaround is to make the scrolling area bigger, something like this:
<style>
#menu > .k-item
{
    float: none;
    display: inline-block;
}
#menu
{
    float: left;
    white-space: nowrap;
}
#container
{
    overflow: hidden;
    height: 200px;
}
</style>
<div id="container">
    <ul id="menu">
        <li>Test 1
            <ul>
                <li>Sub Item 1
                    <ul>
                        <li>Sub Sub Item 1</li>
                        <li>Sub Sub Item 2</li>
                    </ul>
                </li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        <li>Test 2
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        ...
        ...
    </ul>
</div>
<script>
    $(function () {
        $("#menu").kendoMenu();
        $("#container").kendoMobileScroller();
    });
</script>


However I would advise against using menu on mobile as its usability is rather limited.

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Menu
Asked by
Daniel
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or