RadMenu Styling across entire page

[Brett]

I am using a RadMenu at the top of my Master Page and all works fine, however, I want to have a section that has no text and spans to the end of the page kind of like the ibm.com website.  If you notice on the IBM.com website, first there are a few drop down menu buttons and as you go further to the right, there is a blank space that spans pretty wide until the IBM Sign In/Register text menu.  How do I do that with a RadMenu so that it spans across the entire page?

[Shinu]

Hello Brett,

You can achieve the same appearance with RadMenu by setting the width to 100% and having RadMenuItem with desired control(Using ItemTemplate), and then set proper styles for it.

Here is a sample aspx.

<telerik:RadMenu ID="RadMenu1" runat="server"  Flow="Horizontal" EnableRoundedCorners="true"
            OnClientItemClosed="OnClientItemClosed" Width="100%">
    <Items>
       <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Root RadMenuItem1">
       </telerik:RadMenuItem>
       <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Root RadMenuItem2">
       </telerik:RadMenuItem>
       <telerik:RadMenuItem>
         <ItemTemplate>
          <div style="float:right;">
          <asp:LinkButton ID="LinkButton1" runat="server">SignIn</asp:LinkButton>
          </div>
         </ItemTemplate>
      </telerik:RadMenuItem>
     </Items>
</telerik:RadMenu>

Thanks,
Shinu.

[Ak]

Shinu,

Can you point me to where I can find a sample solution project showing this feature so I can see the whole picture.

THanks

[Kate]

Hello Brett,

You can define the following class:

<style type="text/css">
       div.RadMenu .rightItem
       {
           float: right;
       }
   </style>

 
and apply it to a simple menu like this:

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="True" OnClientItemClosed="OnClientItemClosed"
           Width="100%">
           <Items>
               <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Root RadMenuItem1">
               </telerik:RadMenuItem>
               <telerik:RadMenuItem runat="server" ExpandMode="ClientSide" Text="Root RadMenuItem2">
               </telerik:RadMenuItem>
               <telerik:RadMenuItem ViewStateMode="Disabled" OuterCssClass="rightItem">
                   <ItemTemplate>
                      <asp:LinkButton ID="LinkButton1" runat="server">SignIn</asp:LinkButton>
                        </ItemTemplate>
               </telerik:RadMenuItem>
           </Items>
       </telerik:RadMenu>

All the best,
Kate
the Telerik team