Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Johan 95 posts 264 karma points
    Nov 11, 2015 @ 16:16
    Johan
    0

    Horizontal drop-down menu

    I want my drop-down menu to display horizontal like this:enter image description here

    Right now my drop down menu is like this:enter image description here

    How can I achieve it?

    Copy Link
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Nov 12, 2015 @ 14:41
    Dennis Aaen
    0

    Hi Johan,

    What you could do to achieve this, is to use the InGroupsOf method in Razor.

    @foreach(var group in CurrentPage.Children.InGroupsOf(2))
{
   <div class="row-of-two">
      @foreach(var item in group)
      {
         <span>@item.Name</span>
      }
   </div>
}

    With the code above you would get something like this HTML markup output.

    <div class="row-of-two">
  <span>Title 1</span>
  <span>Title 2</span>
</div>

<div class="row-of-two">
  <span>Title 3</span>
  <span>Title 4</span>
</div>

    Then you just need to set some width of the divs in your stylesheet, or if you like to use li´s and li.

    You can find an overview of the different methods in Razor, by look at this, it´s some pdf files https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets, and you have a version for dynamic Razor and strongly typed Razor.

    I know it says for Umbraco 6, but it will also works in Umbraco 7.

    Hope this helps,

    /Dennis

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft