Telerik menu - tutorial

Here is what you need to do to have Telerik menu in your shop.

1. Remove searchbox from header menu to somewhere else.
Open Nop.Web\Views\Shared\HeaderMenu.cshtml
remove @Html.Action("SearchBox", "Catalog") line from there.

2. Edit RootHead.cshtml:
add @using Telerik.Web.Mvc.UI; at the top
add @Html.Telerik().ScriptRegistrar().jQuery(false)
@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("Telerik.common.css"))

before </body> tag.
Also you must have .jQuery(false) here or seachbox autocomplete will not work (will have exception).
"common" is a Telerik style you can switch here. You can get possible names in Nop.Web\Content\2012.2.607(telerik version)\. Or you can build your own.

3. Edit Nop.Web\Views\Common\Menu.cshtml
Add @using Telerik.Web.Mvc.UI; there.
Comment @* ... *@ code between widgets.
Then Add telerik menu code:

@{
Html.Telerik().Menu()
        .Name("Menu")
      .Orientation(MenuOrientation.Horizontal)
        .Items(menu =>
        {
      menu.Add().Text("HOME").Url("/").HtmlAttributes(new { @class = "headermenuitemlevel1" });
            menu.Add().Text("ITEM1").Url(Url.RouteUrl("Category", new { categoryId = 1, SeName = "item1sename" })).HtmlAttributes(new { @class = "headermenuitemlevel1" }).Content(
                @<text>
                <table cellspacing="0" border="0">
...
                 </table>
                </text>
            );

  }).Render();
}

Here you will have menu with 2 main menu items HOME and ITEM1.
HOME will point you to the root page of your shop.
ITEM1 will link you to category with id = 1 (you can get category ids by querying appropriate database field (dbo.Category) using MSSQL management tools).

This menu will be static (will not update if you add/edit categories in administration). But it is highly customizable (you can show tables below it with any data inside). This can't be done if you bind telerik menu to classes or sitemap (as done in Administration area).

Class headermenuitemlevel1 is my custom styling class for menu items on top. It is in theme file styles.css.

.headermenuitemlevel1 {font-weight:bold;font-size:medium;text-align:left; vertical-align:top;}

You need to style everything inside using styles in this css file. Even if you wish to change style of rows in your table below - you must add .headermenuitemlevel2 td{text-align:left;vertical-align:top;} style for that. Or it will not work (inline styling will not work).