New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Hide and Show the Menu on the Client

Here is an example of how to show/hide the menu and menu item client-side.

<telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem runat="server" Text="root 1">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem runat="server" Text="root 2">
            <Items>
                <telerik:RadMenuItem runat="server" Text="child 2.1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="child 2.2">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>
<input id="Button1" onclick="hideMenuItem()" type="button" value="Hide Menu Item" />
<input id="Button2" onclick="showMenuItem()" type="button" value="Show Menu Item" />
<input id="Button3" onclick="showOrHideMenu()" type="button" value="Show/Hide Menu" />
function hideMenuItem() {
    var menu = $find("<%=RadMenu1.ClientID %>");
    menu.findItemByText("root 1").hide();
}

function showMenuItem() {
    var menu = $find("<%=RadMenu1.ClientID %>");
    menu.findItemByText("root 1").show();
}

function showOrHideMenu() {
    var menu = $find("<%=RadMenu1.ClientID %>");
    if (menu.get_element().style.display == "none") {
        menu.get_element().style.display = "";
    }
    else {
        menu.get_element().style.display = "none";
    }                                        
}      

The above code hides the menu if it is visible or shows it if it is invisible by clicking on the Show/Hide Menu.

Clicking on the Hide Menu Item button will hide the "root 1" menu item. Respectively pressing the Show Menu Item button will show that menu item.

In this article