ML

Problem

Besides using CSS columns for dividing content into columns(https://css-tricks.com/guide-responsive-friendly-css-columns/), I found a way CSS columns can be used divider between navigation menu items more than once in production.

So if you want to have a layout that looks like this:

Image 1

You would use css float or display UL's as inline-blocks. And last two items would maybe be a little hacky. Let me show you another example where I have a task to develop complicated navigation menu.

Image 2

For me, traditional floating and inline-block would be an overkill, so let me show you how easy is to perform this kind of demand for a navigation menu.

Solution

Firstly you want to define how many columns you want to have. If you look at Image 1 you can see that its divided into 4 columns. Menu's arhitecture would be something like this:

.menu

-.menu ul

--.menu li

I define that in ul elemnt of an menu like this (prefix-free):

.menu > ul {
    column-count: 4;
}

And then you get something like this:

Image 3

The problem with this is that browser chose where to start a new column, because while writing this only firefox supports column-fill: auto;. That means that you have no control over where the column whill break and you want every ul to be complete, without breaking into new column. But there is a bypass for that. Please note that i found similar solutions on stackoverflow and combined them into one that is working cross browsers.

.menu > ul > li {
    -webkit-column-break-inside: avoid;
    /* Chrome, Safari */
    page-break-inside: avoid;
    /* Theoretically FF 20+ */
    break-inside: avoid-column;
    /* IE 11 */
    display: inline-block;
    /* Actually FF 20+ */
}

Now you get the Image 1 result:

Image 3

This has been tested and working in IE11, latest Edge, Chrome, Firefox and Opera, with partial support for Safari for windows.

Blog Comments Powered by Disqus