How to evenly space the menu items across a Menu

[Jon]

Hi..
I have a menu which is 1000px wide... it has 4 menu items..
How can I evenly space them across the menu... so they take up the entire length of the menu... thanks

|           Item 1                  |            Item  2                        |              MenuItem3               |                MenuOption                        

[Veronica]

Hi Jon,

To be able to stretch all menu items to fill the entire width of RadMenu use this JavaScript:

01.function pageLoad() {
02.           var menu = $find("<%= RadMenu1.ClientID %>");
03.           var width = menu.get_element().offsetWidth;
04.           var singleItemLength = Math.floor(width / menu.get_items().get_count()) - 1 + "px";
05.           var singleItemLengthForLinkAndSpanElements = Math.floor(width / menu.get_items().get_count()) - 23 + "px";
06.           // due to incorrect rounding;
07.           // You may need to subtract a larger number depending on
08.           // the skin that you are using.
09.           for (var i = 0; i < menu.get_items().get_count(); i++) {
10.               var li = menu.get_items().getItem(i).get_element();
11.               var a = menu.get_items().getItem(i).get_linkElement();
12.               var span = menu.get_items().getItem(i).get_textElement();
13.               a.style.width = singleItemLengthForLinkAndSpanElements;
14.               span.style.width = singleItemLengthForLinkAndSpanElements;
15.               li.style.width = singleItemLength;
16.           }
17.       }
18.       window.onresize = pageLoad;

This works perfectly when Skin of the RadMenu is set to "Web20".

If you want to use another skin you'll have to adjust the highlighted in yellow numbers on lines 4 and 5.

Find the full code in the attached .zip file.

Hope this helps.

Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Neil]

The aforementioned code seems to work pretty well.  But in cycling the page by selecting menu item after menu item (usually within the third or fourth selection), the $find function fails returning a null value causing the javascript to error out.

I'm using Telerik.Web.UI version 2010.1.519.35.  Any thoughts?
 

 

 

 

 

<telerik:RadMenu ID="RadMenu1" runat="server" EnableEmbeddedSkins="false" Skin="myCustomSkin" Width="100%" RegisterWithScriptManager="true" />
<telerik:RadScriptBlock ID="menuScript" runat="server">
    <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";
            var singleItemLengthForLinkAndSpanElements = Math.floor(width / menu.get_items().get_count()) - 23 + "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.onload = pageLoad;
    </script>
</telerik:RadScriptBlock>

 

[Cori]

Hello Dave,

Instead of adding the attaching the method in window.onload. Try this:

Sys.Application.add_load(pageLoad);

This will ensure that the RadMenu is fully loaded.

I hope that helps.