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

Stretching menu items to fill the entire width of RadMenu

How to

Stretch all menu items to fill the entire width of RadMenu

Solution

The following approach accommodates any number of root level menu items:

function pageLoad() {
    var menu = $find("<%= RadMenu1.ClientID %>");
    var width = menu.get_element().offsetWidth;
    var singleItemLength = Math.floor(width / menu.get_items().get_count()) - 1 + "px";
    // due to incorrect rounding;    
    // You may need to subtract a larger number depending on    
    // the skin that you are using.     

    for (var i = 0; i < menu.get_items().get_count(); i++) {
        var li = menu.get_items().getItem(i).get_element();
        li.style.width = singleItemLength;
    }
}
window.onresize = pageLoad;
<telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" Width="100%">   
In this article