水平下拉菜单 Umbraco

Question

我正在使用 Umbraco，我希望我的下拉菜单像这样水平显示：

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

问题是我不知道如何在 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="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 解决问题，如 fiddle

所示

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

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

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

水平下拉菜单 Umbraco

Horizontal drop-down menu Umbraco

html

javascript

css

jquery

umbraco