Horizontal drop-down menu Umbraco

Question

I'm using Umbraco and I want my drop-down menu to display horizontal like this:

Right now my drop down menu is like this:

The problem is that I don't know how to do this in Umbraco

Here is my code:

MainNavigation code:

@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>

    }
}

The above code is included in my master page through this code:

<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');
      }
    }
  });

Can anyone give me advice on how to make the drop down menu horizontal?

@DaCh I can increase the size of the hover block with CSS but I can't make the sub-menu links horizontal — John, Nov 11 '15 at 13:58
Are you using bootstraps navbar? if so. can't you make a css class like `li.dropdown open { width:40% !important, float: left !important, }` This is just not tested. just a sample — DaCh, Nov 11 '15 at 14:01
`ul.dropdown-menu>li { float: left; width: 50% !important; }` This will work on a bootstrap navbar if you are using defualt one like [this](http://getbootstrap.com/components/#navbar-default) on the dropdown menu — DaCh, Nov 11 '15 at 14:20
if it should be bootstrap check this fiddle i just made out. https://jsfiddle.net/4hupm4fk/ if it is the defualt navbar then you just need the css class and it should work — DaCh, Nov 11 '15 at 15:23

score 1 · Accepted Answer · answered Nov 11 '15 at 21:50

So described in the comment. The problem can be fixed with CSS as shown in the fiddle

This is what I would call a fix. But the way I would think is the proper way, would be to create a CSS class instead of override the bootstrap CSS.

When overriding the bootstap class, you also create a problem. if you would like to use two navbar's and the one needs the horizontal dropdown menu while the other needs the default CSS. The CSS override would effect both. But if you create a class you could use it on only the one element.

Hope this makes sense. Hard to spell check it from the mobile.

Horizontal drop-down menu Umbraco

1 Answers1