Toogle menu for mobile

4 posts, 0 answers
  1. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 19 Feb 2015 Link to this post

    Hi All,

    Is it possible to show text instead of the toggle icon while rendering for mobile?

    Best Regards,
    Damodar
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 19 Feb 2015 Link to this post

    Hi Damodar,

    As the Mobile RadMenu uses a font icon, you could easily change its content. Just use the following sample CSS for a RadMenu with RenderMode="Mobile":

    html .RadMenu .rmRootToggle:before {
        content: "MENU";
    }
     
    html .RadMenu .rmRootToggle:before {
        width: auto;
        padding: 0 10px 5px;
        position: static;
    }
     
    html .RadMenu .rmRootToggle {
        width: auto;
        height: auto;
    }

    The following screenshot shows the result. You may need to edit the CSS to fit your custom Menu text.

    You may find additional information about the toggle icon customization in the following forum thread:
    http://www.telerik.com/forums/custom-mobile-menu-button---is-it-possible

    Regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 19 Feb 2015 in reply to Dimitar Link to this post

    Hi Dimitar,

    Thanks for the quick response.
    I have RenderMode="Auto" and I want to show "MENU" Text when they visit the page with mobile device.
    Or when they resize the window less than  760px.
    HTML
    <div id="MenuContainer" class="centeredText">
            <telerik:RadMenu ID="RMenu" runat="server" RenderMode="Auto" ShowToggleHandle="True" Skin="MetroTouch" OnClientItemClicking="OnClientItemClicking">
                <Items>...</telerik:RadMenu></div>
    CSS
    html .RadMenu .rmRootToggle:before {
        width: auto;
        padding: 0 10px 5px;
        position: static;
    }
    @media only screen and (max-width: 760px) {
        html .RadMenu .rmRootToggle:before {
                     content: "MENU"; width: auto; padding: 0 10px 5px; position: static;}
        html .RadMenu .rmRootToggle {
            width: auto;
            height: auto;
        }    
    }

    Best Regards,
    Damodar
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 20 Feb 2015 Link to this post

    Hi again,

    In a week or two we have a planned Q1 2015 official release coming. This release would feature a new control called RadNavigation. It is designed to handle scenarios where customers want to have a mobile menu on window resize.

    Currently, this could be achieved by using two menus, one in Lightweight and one in Mobile render mode, and hiding one of them with media queries, while showing the other.

    I would recommend you to wait for the upcoming official release and try the RadNavigation control instead. There will be demos with the release, which would help you to quickly explore the new control and its functionalities.

    Best regards,
    Dimitar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top