0
我需要在我的主导航中以水平顺序显示我的子导航菜单。我可以在垂直方向显示子导航，但我不知道如何在水平方向上进行更改。如何在Umbraco中水平显示子菜单？
我使用下面的代码显示：
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{ var home = CurrentPage.Site(); }
@if (home.Children.Any())
{
@* Get the first page in the children *@
var naviLevel = home.Children.First().Level;
@* Add in level for a CSS hook *@
<ul class="[email protected]" >
@* For each child page under the home node *@
@foreach (var childPage in home.Children)
{
if (childPage.Children.Any())
{
<li style="width:14%;text-align:left; "class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)" >
@if(childPage.DocumentTypeAlias == "LandingPage")
{
<a style="padding-left:inherit;font-size:11px;" href="@childPage.Url">@childPage.Name</a>
@childPages(childPage.Children)
} else {
<a style="padding-left:inherit;font-size:11px;" href="@childPage.Url">@childPage.Name</a>
}
</li>
}
else
{
<li style="width:14%;padding-right:15px;text-align:left;" class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
<a style="font-size:11px;padding-left:inherit;" href="@childPage.Url">@childPage.Name</a>
</li>
}
}
</ul>
}
@helper childPages(dynamic pages)
{
@* Ensure that we have a collection of pages *@
if (pages.Any())
{
@* Get the first page in pages and get the level *@
var naviLevel = pages.First().Level;
@* Add in level for a CSS hook class="sublevel [email protected](naviLevel)" style="background-color:white;" *@
<ul class="sublevel [email protected](naviLevel)" style="background-color:white;position:fixed; top:150px;margin-left: 520px;width: 873px;">
@foreach (var page in pages)
{
<li>
<a href="@page.Url" style="font-size:12px;color:black;">@page.Name<span style="float:right;color:#FF6900;padding: 0px;margin-top: -26px;">></span></a>
@* <input src="/media/1095/site-search-image-button.png" style="height:22px;width:21px;float:right" type="image">>*@
@* if the current page has any children *@
@if (page.Children.Any())
{
@* Call our helper to display the children *@
@childPages(page.Children)
}
</li>
}
</ul>
}
}