Menu Item Justification

[Saurabh Srivastava]

Hi,

I have set the menu width to be 100%. This ensures that the menu stretches to the entire page width. However, I have only 4 menu items. By default, they appear to be left justified and I am not able to get it center justified and increase their width so that it looks a bit more consistent and nice (e.g. the same implementation as the menu on your website homepage).

Is there a way to accomplish this?

Regards,
Saurabh

[Saurabh Srivastava]

In additon, is there a way to make the top level menu items "non clickable"?

[Atanas Korchev]

Hi Saurabh Srivastava,

This KB article shows how to justify the menu items.

By default menu items are not clickable. They will navigate only if the NavigateUrl property is set or if you have subscribed to the ItemClick event. You can prevent items from postging back by setting their PostBack property to false.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Saurabh Srivastava]

Hi,

Thanks for the response. The Javascript provided is not working for me. I have a master page for my webapp and I have placed the menu on the masterpage.

 

function JustifyMenu()

 

{

 

var menu = $find("<%#rmRamms.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.onload =

function()

 

{

JustifyMenu();

setFooter();

 

}

 

<telerik:RadMenu ID="rmRamms" runat="server" Skin="Custom" Width="100%" EnableEmbeddedSkins="false">

 

It is somehow not able to find the control. I tried using  $find("<%=rmRamms.ClientID%>"); but this gives me a "he Controls collection cannot be modified because the control contains code blocks" error.

I also tried using document.getElementById('ct00_rmRamms') which did find the menu but it failed while finding the individual items.

Thanks,
Saurabh 

[Atanas Korchev]

Hi Saurabh Srivastava,

The correct way is to use <%= %>. To avoid the exception please check this help article. The required workaround is at the end of the page.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Saurabh Srivastava]

Hi,

Thanks for your response again. I was able to apply the fix and finally see the menu expanded. But as soon as I navigated to another content page, the menu collapsed once again. I do notice a Javascript error at the bottom of my page and it says that it is again unable to find the control when a content page is loaded (the control is however present and I can see that). I have placed all my Javascript code on my Master Page in a RadCodeBlock and placed that in the body tag. Any clues?

    <telerik:RadCodeBlock id="RadCodeBlock1" runat="server">
    <script type="text/javascript">
   
         function JustifyMenu()  
        {
            //debugger;
            var menu = $find("<%=rmRamms.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;  
            }  
        }  

   

        function getWindowHeight()
        {
            var windowHeight = 0;
            if (typeof(window.innerHeight)=='number')
            {
                windowHeight=window.innerHeight;
            }
            else
            {
                if (document.documentElement && document.documentElement.clientHeight)
                {
                    windowHeight = document.documentElement.clientHeight;
                }
                else
                {
                    if (document.body&&document.body.clientHeight)
                    {
                        windowHeight=document.body.clientHeight;
                    }
                }
            }
            return windowHeight;
        }

        function setFooter()
        {
            if (document.getElementById)
            {
                var windowHeight = getWindowHeight();
                if (windowHeight > 0)
                {
                    var contentHeight = document.getElementById('divContent').offsetHeight;
                    var footerElement = document.getElementById('divFooter');
                    var footerHeight = footerElement.offsetHeight;
                    if (windowHeight - (contentHeight + footerHeight + 180) >= 0)
                    {
                        footerElement.style.position = 'relative';
                        footerElement.style.top = (windowHeight - (180 + contentHeight + footerHeight))+'px';
                    }
                    else
                    {
                        footerElement.style.position = 'static';
                    }
                }
            }
        }

        window.onload = function()
        {
            JustifyMenu();
            setFooter();
        }

        window.onresize = function()
        {
           JustifyMenu();
           setFooter();
        }
    </script>

Regards,
Saurabh

[Atanas Korchev]

Hello Saurabh Srivastava,

Please try calling the JustifyMenu function during pageLoad not window.onload. The latter occurs before RadMenu is initialized. Here is the suggested workaround:


       function pageLoad()
       {
            JustifyMenu();

            setFooter();
        }

        window.onresize = function()
        {
           JustifyMenu();
           setFooter();
        }
    </script>

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.