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:20
    Johan
    0

    How can I make the drop-down horizontal?

    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 this?

  • gary 385 posts 916 karma points
    Nov 11, 2015 @ 22:24
    gary
    0

    Hi Johan

    This can be done with a combination of css and razor.

    Hard to be exact without knowing your set up, but will explain in words so you can apply to your project.

    In the dropdown part of your navigation set up 3 columns, (easy if it's bootstrap).

    However you are calling the sub-menu in razor, you can use a .Take(5) on the end, this will give you 5 items in column 1.

    For column 2, repeat the code for the dropdown, then use .Skip(5).Take(5), this will ignore the first 5 already in column 1 and put the next 5 in column 2.

    And column 3, .Skip(10).Take(5) and so on.

    If you get stuck, post your navigation code and maybe easier to explain.

    Regards

    Gary

  • Tim Miller 32 posts 252 karma points
    Nov 12, 2015 @ 01:06
    Tim Miller
    0

    Gary is right, you will probably have to do a little math to make sure your columns come out more or less even though. I just thought I'd chime in with a few additional options.

    Your optimal solution could depend largely on the browsers you are trying to support. Check this out http://www.w3schools.com/css/css3multiplecolumns.asp, with very limited CSS3 you can achieve what you're looking for. Browser support is listed on the page as well.

    If you're looking to support legacy browsers, I've used tools like Masonry to achieve this too. http://masonry.desandro.com/

Please Sign in or register to post replies

Write your reply to:

Draft