Stretch Menu left when right aligned

[Clyde]

Scratching my head on this one. I have a menu that should stretch across the page, so width:100%. That part works, the menu displays correctly.

What I would like to do is shift the root menu items to align from the right towards the left, leaving a space where they end.

Is this even possible?

Here is two images to help visualize what I need.

Thanks
Clyde

[Princy]

Hi Clyde,

Try setting width and dir properties of RadMenu as follows.

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" dir="rtl" Width="100%">
    .........
</telerik:RadMenu>

Please take a look into this demo for more information.

Hope this helps.

Thanks,
Princy.

[Clyde]

Hi Princy,

Unfortunately that does not give me the desired affect. I had given it a try, but need a left-to-right menu just aligned within the top row to the right. Not the actual element/nodes with their cell, but the entire top row.

This is more for aesthetic reasons than anything else. It just would be good to have the menu bar at 100% width, but as you can see in the image menu2.jpg, extend all the way to the left, under that other image that is "hanging" down.

Thanks
Clyde

[Princy]

Hi Clyde,

Try setting CssClass property of first RadMenuItem as follows.

CSS:

<style type="text/css">
  .menuitem
   {
     margin-left:200px;  //required margin for RadMenuItem1
   }
</style>

ASPX:

<telerik:RadMenu ID="RadMenux" runat="server" Width="100%" >
  <Items>
    <telerik:RadMenuItem Text="RadMenuItem1" CssClass="menuitem">
    </telerik:RadMenuItem>
    .....
  </Items>
</telerik:RadMenu>

Hope this helps.

Thanks,
Princy.

[Clyde]

Thanks Princy, you pointed me in the right direction. The key is to work with the margin-left of the first element. Given that this menu is dynamically generated and can be changed at any time, I am not able to hardcode in any fixed lengths.

So I took this a step further and put together some javascript that can detect the size of the existing menu and then alter it in onclientload.

<script type="text/javascript">
    var siteWidth = 980;

    function OnMenuLoad(sender) {
        var items = sender.get_items();
        var menuDomElement = sender.get_element();
        var itemWidth = siteWidth - menuDomElement.offsetWidth;
        var item = items.getItem(0).get_element();
        item.style.marginLeft = itemWidth+'px';
    }
</script>

<telerik:RadMenu ID="RadMenu2" runat="server" Style="z-index: 1900;" Skin="Default" SkinID="HMenu" OnItemDataBound="RadMenu_ItemDataBound" OnClientLoad="OnMenuLoad">
</telerik:RadMenu>

The siteWidth var can be populated from the code behind if you have a variable size site.

Seems to work well. Documented here for the next person to ask this question.

Regards
Clyde

[jlj30]

Clyde,

Thanks for posting your script.
It was just what I needed.

Jim