Responsive RadMenu

[Ruchi]

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

[Ivan Zhekov]

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

 

 

[Ivan Zhekov]

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