This is a migrated thread and some comments may be shown as answers.

[Solved] How to build the same Mega Menu example from AJAX Demo with MVC menu ?

3 Answers 89 Views

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

3 Answers, 1 is accepted

Accepted

answered on 26 Aug 2011, 07:15 AM

Hello Moti,

You can build a similar setup using the code we have for the example navigation in our online demos (click the "All Products" menu item). Here is that code (found in Examples/Telerik.Web.Mvc.Examples/Views/Shared/TopNavigation.ascx):

<% Html.Telerik().Menu()

.Name("resources")

.HtmlAttributes(new { @class = "menu-bar" })

.OpenOnClick(true)

.Items(menu =>

{

menu.Add().Text("Support Resources")

.Items(resources =>

{

resources.Add().Text("Online Documentation").Url("http://www.telerik.com/help/aspnet-mvc/");

resources.Add().Text("Forums").Url("http://www.telerik.com/community/forums/aspnet-mvc/general.aspx");

resources.Add().Text("Blogs").Url("http://blogs.telerik.com/");

resources.Add().Text("Code Library").Url("http://www.telerik.com/community/code-library.aspx");

resources.Add().Text("Videos").Url("http://tv.telerik.com/products/aspnet-mvc");

resources.Add().Text("Issue Tracker").Url("http://www.telerik.com/support/pits.aspx");

});

menu.Add().Text("All Telerik Products")

.ContentHtmlAttributes(new { id = "all-products" })

.Content(() => {%>

<div class="column">

<h2>Developer Tools</h2>

<h3>Web UI Controls & Components</h3>

<ul>

<li><a href="http://www.telerik.com/products/aspnet-ajax.aspx">ASP.NET AJAX</a></li>

<li><a href="http://www.telerik.com/products/aspnet-mvc.aspx">ASP.NET MVC</a></li>

<li><a href="http://www.telerik.com/products/silverlight.aspx">Silverlight</a></li>

</ul>

<h3>Desktop UI Controls & Components</h3>

<ul>

<li><a href="http://www.telerik.com/products/wpf.aspx">WPF</a></li>

<li><a href="http://www.telerik.com/products/winforms.aspx">Windows Forms</a></li>

</ul>

<h3>Mobile UI Controls & Components</h3>

<ul>

<li><a href="http://www.telerik.com/products/windows-phone.aspx">Windows Phone</a></li>

</ul>

<h3>Report Designer and Viewer</h3>

<ul>

<li><a href="http://www.telerik.com/products/reporting.aspx">Telerik Reporting</a></li>

</ul>

<h3>Data Access</h3>

<ul>

<li><a href="http://www.telerik.com/products/orm.aspx">OpenAccess ORM</a></li>

</ul>

<h3>Visual Studio Productivity Plugins</h3>

<ul>

<li><a href="http://www.telerik.com/products/justcode.aspx">JustCode</a> <span class="product-info-regular">(Code Analysis, Refactoring)</span></li>

<li><a href="http://www.telerik.com/products/mocking.aspx">JustMock</a> <span class="product-info-regular">(Unit Testing, Mocking)</span></li>

</ul>

</div>

<div class="column">

<h2>Agile Project Management</h2>

<ul>

<li><a href="http://www.telerik.com/team-productivity-tools.aspx">TeamPulse</a></li>

</ul>

<h2>Automated Testing</h2>

<ul>

<li><a href="http://www.telerik.com/automated-testing-tools.aspx">Web UI Testing</a></li>

<li><a href="http://www.telerik.com/automated-testing-tools/webaii-framework-features.aspx">Test Automation Framework</a></li>

</ul>

<h2>Web Content Management</h2>

<ul>

<li><a href="http://www.sitefinity.com/">Sitefinity ASP.NET CMS</a></li>

<li><a href="http://www.sitefinity.com/marketplace.aspx">Add-ons Marketplace</a></li>

</ul>

<h2>SharePoint</h2>

<ul>

<li><a href="http://www.telerik.com/products/sharepoint.aspx">SharePoint Acceleration Kit</a></li>

</ul>

</div>

<%});

})

.Render();

The interesting part is how the Content method of the menu item is used to define the arbitrary content (columns of links).

Regards,
Atanas Korchev
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 26 Aug 2011, 08:07 AM

Dear Atanas,

Thank you very much for your reply!
i tought the examples is only "offline" version of the online demo, didnt see that there is source code!!!! Very Nice.

My main problem is HOW i change the style of the Root Items of the menu.
in this example demo
http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx
the "PRODUCTS | STORES | NEWS | EVENTS " root items style is with nice height and when the mouse over the root item, the color is changed nicely.

Another very nice telerik menu (i dont know if t's mvc menu or RadMenu Ajax...) is here:
http://www.vodafone.com/content/index.html
This is the same look i want for my menu (very similar to the Ajax menu in your demo)

i see your code, i think this line is the key for solving my problem:

.HtmlAttributes(new { @class = "menu-bar" })

My question are:

1) in my application i will have this Custom Menu i want (let say i will finally build it) in the top of my master page.
     in all other pages I want to use the Windows7 skin, SOME of the pages will have Menu inside them,
     so actually i will have on the same page (Master page + View) BOTH Custom menu and a Windows7 menu (custom menu in my master page and windows7 menu in my View child)
is that possible?
    as i see in the Examples/Telerik.Web.Mvc.Examples/Views/Shared/TopNavigation.ascx this is possible
    because
one Custom menu in the master page is TopNavigation.ascx
and the second menu is the example menu for the demo in the Menu\Templates.aspx page.

2) There is no documentation in the Example Solution on how to Register my custom menu with special CSS file that match to the style i want.
i see only that if i want to use the windows7 skin, then i need to do this

<%= Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.css")

.Add("telerik.rtl.css")

.Add("telerik.Windows7.css")

)

%>

i still didnt find how to connect the custom menu to the

.HtmlAttributes(new { @class = "menu-bar" })

Many thanks,

Moti