Stretching menu items to fill the entire width of RadMenu

Article information
Article relates to	RadMenu v4.x RadMenu AJAX (Prometheus)
Created by	Petyo, Telerik
Last modified	Feb 15, 2008
Last modified by	Veskoni, Telerik

 
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:

JavaScript:

<script type="text/javascript">

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;

</script>

ASPX:

* * *

<telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" Width="100%">

* * *

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

JavaScript:

<script>

function JustifyMenu ()

{

var menu = <%=RadMenu1.ClientID%>;

var width = menu.DomElement.offsetWidth;

var singleItemLength = Math.floor(width/menu.Items.length)-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.Items.length; i ++)

{

var li = menu.Items[i].DomElement;

li.style.width = singleItemLength;

}

}

window.onresize = window.onload = JustifyMenu;

</script>

ASPX:

* * *

<radm:RadMenu id="RadMenu1" runat="server" width="100%" />

* * *

Comments

• Mostafa Anoosheh , Oct 5, 2006

  Thanks for good post.

• Paige Cook , Dec 11, 2006

  Thanks is exactly what I needed. Much appreciated.

• Hetal , Feb 7, 2007

  Very good

• Daniel Pardoen , Apr 12, 2007

  Great

• Charles Wesley , Apr 23, 2007

  Is it possible to set a percentage width on a RadMenu that is set on page load? RadMenu1.width="100%" in code-behind causes an error whereas the aspx example that ostensibly sets the same property does not.

• Telerik Admin , Apr 27, 2007

  To set the Width property to 100% at the server side you should use the following code: C# RadMenu1.Width = System.Web.UI.WebControls.Unit.Percentage(100);

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!