Question

我正在使用Umbraco，我希望我的下拉菜单显示水平，如下所示：

现在我的下拉菜单是这样的：

问题是我不知道如何在Umbraco中做到这一点

这是我的代码：

MainNavigation代码：

@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="level-@naviLevel">
        @* For each child page under the home node *@
        @foreach (var childPage in home.Children)
        {
            if (childPage.Children.Any())
            {
                <li class="has-child @(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    @if (childPage.DocumentTypeAlias == "Huvudmeny")
                    {
                        <span>@childPage.Name</span>
                        @childPages(childPage.Children)
                    }
                    else
                    {
                        <a href="@childPage.Url">@childPage.Name</a>
                    }
                </li>
            }
            else
            {
                <li class="@(childPage.IsAncestorOrSelf(CurrentPage) ? "selected" : null)">
                    <a 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 *@

    <ul class="sublevel level-@(naviLevel)">
        @foreach (var page in pages)
        {
            <li>
                <a href="@page.Url">@page.Name</a>

                @* if the current page has any children *@
                @if (page.Children.Any())
                {
                    @* Call our helper to display the children *@
                    @childPages(page.Children)
                }
            </li>
        }
    </ul>

    }
}

以上代码通过以下代码包含在我的母版页中：

<nav>
    @{ Html.RenderPartial("MainNavigation"); }
</nav>

JS

// Navigation
  $('#toggle').click(function(){
    $('.has-child').removeClass('selected');
    $('nav').toggleClass('open');
    $('.cross').toggleClass('open');
  });

  $('.has-child').click(function(){
    if ( window.innerWidth < 768 ) {
      if ( $( this ).hasClass('selected')){
        $('.has-child').removeClass('selected');    
      } else {
        $('.has-child').removeClass('selected'); 
        $(this).toggleClass('selected');
      }
    }
  });

有人可以就如何使下拉菜单水平提供建议吗？

Answer 1

评论中有所描述。可以使用CSS修复问题，如小提琴

所示

这就是我所说的修复方法。但我认为正确的方法是创建一个CSS类而不是覆盖bootstrap CSS。

覆盖bootstap类时，也会产生问题。如果你想使用两个导航栏，一个需要水平下拉菜单，而另一个需要默认的CSS。 CSS覆盖会影响两者。但是如果你创建一个类，你只能在一个元素上使用它。

希望这是有道理的。难以从手机上拼写检查。

水平下拉菜单Umbraco

1 个答案: