Telerik blogs

It’s always cool to see how the RadControls for ASP.NET AJAX work together. Today I saw a question from a customer asking if the RadRotator can be used to create a menu similar to that on the Experts Exchange web site. If you’re unfamiliar with their menu, it’s got a lot of options in it. Because there are so many menu choices they decided to make the menu interactive, adding a button to the right-hand side of the menu which, when clicked, replaces the existing menu options with another set.

1Using this approach means you no longer have to be concerned about having too many menu options. Granted, you don’t want to overwhelm your users with choices or you may scare them from your site. But if you have a need for more menu items than will fit on your page, this approach may be a good way to go. So how hard is it to implement with the RadControls for ASP.NET?

The RadControls for ASP.NET are meant to provide you with pre-packaged, rich functionality and design that you can use to build your web apps quickly. In this case, as usual, they deliver on that promise. You can easily implement a rotating menu in a matter of minutes by dropping a RadRotator on your page and using the RadMenu control for your rotator items.

<telerik:RadRotator ID="RadRotator1" runat="server"
 Height="40px"
 Width="840px"
 ItemHeight="40px"
 ItemWidth="800px"
 Skin="Black"
 RotatorType="Buttons">
 <Items>
 <telerik:RadRotatorItem>
 <ItemTemplate>
 <telerik:RadMenu ID="RadMenu1" runat="server"
 Height="50px" 
 BackColor="Black"
 Skin="Black">
 <Items>
 <telerik:RadMenuItem Text="Home" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Lorem" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Ipsum" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Praesent" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Vestibulum" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Tellus" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Adipiscing" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Phasellus" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Curabitur" NavigateUrl="#" />
 </Items>
 </telerik:RadMenu>
 </ItemTemplate>
 </telerik:RadRotatorItem>
 <telerik:RadRotatorItem>
 <ItemTemplate>
 <telerik:RadMenu ID="RadMenu1" runat="server"
 Height="50px" 
 BackColor="Black"
 Skin="Black">
 <Items>
 <telerik:RadMenuItem Text="Praesent" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Vestibulum" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Tellus" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Adipiscing" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Phasellus" NavigateUrl="#" />
 <telerik:RadMenuItem Text="Curabitur" NavigateUrl="#" />
 </Items>
 </telerik:RadMenu>
 </ItemTemplate>
 </telerik:RadRotatorItem>
 </Items>
</telerik:RadRotator>

I borrowed the a design from FreeCssTemplates.org to make the demo pretty. By changing only a couple of CSS styles I had a great-looking, interactive menu that rotates its content. Pretty easy, huh?

3Download the code and check it out for yourself!

[Source: C#]


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.