水平下拉菜单Umbraco

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。

覆盖引导程序类时，还会创建一个问题。 如果您想使用两个导航栏，一个导航栏需要水平下拉菜单，而另一个导航栏则需要默认的CSS。 CSS覆盖会同时起作用。 但是，如果创建一个类，则只能在一个元素上使用它。

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