How to evenly space the menu items across a Menu

4 posts, 0 answers
  1. Jon
    Jon avatar
    539 posts
    Member since:
    Apr 2004

    Posted 17 May 2010 Link to this post

    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                        
  3. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 20 May 2010 Link to this post

    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.
  5. Neil
    Neil avatar
    16 posts
    Member since:
    Mar 2007

    Posted 21 Oct 2010 Link to this post

    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>

     

  7. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 22 Oct 2010 Link to this post

    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.
  8.
Back to Top