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

[Solved] menu bar is coming in the right top corner

3 Answers 28 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.

Harish asked on 29 Nov 2011, 05:48 AM

Hi,

I need like main menu items should be horizontal and sub item should be in vertical ,i tried with orientation property but i am not getting correctly.

i pasting my layout.cshtml script

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
   @* <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/RangeDateValidator.js")" type="text/javascript"></script>*@
    @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.Windows7.css").Combined(true).Compress(true)))
    @*<style type="text/css">
        .webGrid
        {
            margin: 4px;
            border-collapse: collapse;
            width: 1000px;
        }
        .header
        {
            background-color: #E8E8E8;
            font-weight: bold;
            color: #FFF;
        }
        .webGrid th, .webGrid td
        {
            border: 1px solid #C0C0C0;
            padding: 5px;
        }
        .alt
        {
            background-color: #E8E8E8;
            color: #000;
        }
        .person
        {
            width: 200px;
            font-weight: bold;
        }
    </style>*@
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">

                        @(Html.Telerik().Menu().Name("menu").Orientation(MenuOrientation.Horizontal)
                    .Items(menu =>
                    {
                        menu.Add().Text("Home").Items(item =>
                        {
                            item.Add().Text("Client").Action("Index", "Client");
                            item.Add().Text("List").Action("Index", "List");
                            item.Add().Text("Campaign").Action("Index", "Campaign");

                        });
                        menu.Add().Text("About").Action("About", "Home");
                    }))

            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
            </div>
        </div>
    </div>
    @(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))
</body>
</html>
Regards,
Harish Chepuri.

3 Answers, 1 is accepted

answered on 14 Apr 2012, 05:03 PM

I have the same issue.
I folowed the instructions in registering the Menu
need to have the menu showing in Horizontal form & submenu Vertically.

this in head section

<head>

....
@(Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group
         .Add("telerik.windows7.min.css")
         .Add("telerik.common.min.css")
            //.Add("telerik." + Html.GetCurrentTheme() + ".css")
         .Combined(true)
         .Compress(true)
         ))
     @RenderSection("HeadContent", required: false)

</Head>
<body>
   <div id="menu">
   @{ Html.Telerik().Menu()
            .Name("menu")
            .Orientation(MenuOrientation.Horizontal)
           .HtmlAttributes(new { style = "float: left};"})

.Items(items =>
{

                items.Add().Text("TESTA ")
                               .HtmlAttributes(new { style = "width:50px" })
                               .ImageUrl("~/Content/Icons/mvc.png")
                               .Url("~/Home");

                items.Add().Text("TESTB ")
                               .HtmlAttributes(new { style = "width:50px" })
                                .ImageUrl("~/Content/Icons/mvc.png")
                                 .Url("~/Home/About");
                items.Add().Text("TESTC ")
                               .HtmlAttributes(new { style = "width:50px" })
                                .ImageUrl("~/Content/Icons/mvc.png")
                                 .Url("~/Home");

                items.Add().Text("TESTD ")
                              .HtmlAttributes(new { style = "width:50px" })
                              .ImageUrl("~/Content/Icons/mvc.png")
                             .Items(child =>
                             {
                                 child.Add().Text("Test D.1 ");
                                 child.Add().Text("Test D.2 ");
                             });

})

.Render();
}
</div>

@(Html.Telerik().ScriptRegistrar())

</body>
</html>

html>