Responsive RadMenu

3 posts, 0 answers
  1. Ruchi
    Ruchi avatar
    54 posts
    Member since:
    Apr 2012

    Posted 11 Aug 2014 Link to this post

    Hello Team,

    I want Rad Menu to behave responsive for my asp.net application.

    Please find code below :
        <div class="container">
            <button class="toggle" type="button">Toggle menu</button>
            <div  class="popup">
        <telerik:RadMenu runat="server" RenderMode="Lightweight">
                    <Items>
                        <telerik:RadMenuItem Text="File">
                            <Items>
                                <telerik:RadMenuItem Text="New" />
                                <telerik:RadMenuItem Text="Open" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="Save" />
                                <telerik:RadMenuItem Text="Save As" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="Print Preview" />
                                <telerik:RadMenuItem Text="Print" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="Close" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Edit">
                            <Items>
                                <telerik:RadMenuItem Text="Undo" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="Cut" />
                                <telerik:RadMenuItem Text="Copy" />
                                <telerik:RadMenuItem Text="Paste" />
                                <telerik:RadMenuItem Text="Clipboard..." />
                                <telerik:RadMenuItem IsSeparator="True" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Insert">
                            <Items>
                                <telerik:RadMenuItem Text="Break..." />
                                <telerik:RadMenuItem Text="Page Numbers..." />
                                <telerik:RadMenuItem Text="Date and Time..." />
                                <telerik:RadMenuItem Text="Field..." />
                                <telerik:RadMenuItem Text="Symbol..." />
                                <telerik:RadMenuItem Text="Comment" />
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="Picture" />
                                <telerik:RadMenuItem Text="Diagram" />
                                <telerik:RadMenuItem Text="Text Box" />
                                <telerik:RadMenuItem Text="Hyperlink" />
                            </Items>
                        </telerik:RadMenuItem>
    </Items>
                </telerik:RadMenu>
        </div>
        </div>

    Script:

     <script type="text/javascript">
                Sys.Application.add_load(function () {

                    var $ = $telerik.$,
                        mqTest = document.getElementById("mqTest");

                    $("link.append").appendTo("head");

                    $(".toggle").bind("click", function () {
                        $(".popup").toggle();
                    });

                    var mq = window.matchMedia("(max-width: 980px)");
                    mq.addListener(handleWidthChange);

                    function handleWidthChange(mq) {
                        if (mq.matches) {
                            $(".popup").hide();
                        }
                        else {
                            $(".popup").show();
                        }
                    }
                    handleWidthChange(mq);
                });
            </script>

    Css:
    .toggle {
        display: none;
    }
    @media only screen and (max-width: 360px) {

        .container {
            position: relative;
        }

        .toggle {
            display: inline-block;
        }

        .popup {
            position: relative;
            left: 0;
            top: 100%;
            display: none;
        }

        .RadMenu {
            font-size: 16px;
            min-width: 40vw;
        }

        .RadMenu .rmRootGroup {
        }
            .RadMenu .rmRootGroup > .rmItem {
                float: none;
                border: 0;
                border-bottom: 1px solid #cccccc;
            }
            .RadMenu .rmRootGroup > .rmLast {
                border: 0;
            }

            .RadMenu .rmRootGroup .rmRootLink {
                padding: .5em 1em;
            }

        .rmSlide {
            display: inline-block !important;
            padding-left : 154px;
        }
    }


    It behaves too bad on hover effect and Sub Menu item always comes on top instead of inline with its parent item.

    Can any one help me out?

    Thanks and Regards,
    Ruchi Patel
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 14 Aug 2014 Link to this post

    Hi, Ruchi.

    That's more or less expected behaviour, having in mind the Menu, in it's current state implies certain things.

    That said, it still should be possible to an extent to make the menu responsive. I will follow up when I have substantial success.

    Regards,
    Ivan Zhekov
    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. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 15 Aug 2014 Link to this post

    In order to have some sort of responsive RadMenu, with the least of customization, the following should suffice:

    1) disable expand / collapse animations
    2) set the popups to be static
    3) remove some styling from the popups

    Just like in the attached page

    Regards,
    Ivan Zhekov
    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