Responsive pattern: Block-list or menu as justify

Responsive navigation as CSS-justify (fluid layout)

Tags:

With a second menu-line it is possible to use text-align:justify for responsive ul-li-menus.

It is very commen to use ul-li elements for menu-strukturs. But with responsive layouts the menu width is static and do not get smaller or wider. It means the spaces between the menu-entries are not adapted with the site-width.

The condition is more then one text-lines. This means one line break (word wrap) is needed. Because the semantic of text-align:justify is a "justify last left". It means that the last text-line has no justify and is aligned left. For a second menu-line we create a second ul-element with the pseudo-class ::after and render no content with content: "".

HTML:

Add an empty menu entry at the last position.


<html> 
    <body>
        <ul class=”menu-footer-menu-container”>
          <li><a href="http://localhost/wordpress/index/">Home</a></li>
          <li><a href="http://localhost/wordpress/project/">Project</a></li>
          ...
          <li><a href="http://localhost/wordpress/impressum/">Impressum</a></li>
        </ul>
    </body>
</html>

Now set we set the CSS selectors. One for the menu and one for the secont ul-menu-element. The menu have set to text-align:justify. The last entry become a padding-left:100% for break the menu line in a second one, what effects that the first menu line is shown as justify.

Hint: Do not use float:left. It does not work with text-align:justify! Use instead display:inline-block. The display:inline-block effects no line break as float:left it does.

CSS:

Use for the last menu entry padding-left:100% and visibility:hidden.


ul.menu-footer-menu-container {
    text-align: justify;
}
ul.menu-footer-menu-container:after {
    content: "";
    padding-left: 100%;
    /* do not use float:left but the display:inline-block below!!! */
    display:inline-block;
}
ul.menu-footer-menu-container li {
    display: inline-block;
}

CSS3:

In the CSS3 @media-query with smaller width, it is only a smaller font-size required and the justify-pattern works for a wide range of ul-li-menu width.

Example: Use @media-query to expand the width range.


body {
    font-size: 14px;
    font-size: 0.875rem;
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
    body {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

Demo: ExampleResponsiveNavigationJustify.html

Download: ExampleResponsiveNavigationJustify.zip

The text-align:justify works with more then one line very well and can be used for teaser, articles, etc. According to Adobe Photoshop it is a "Justify last left".

Use the justify-attribut for other menues like contact areas or footer-menus.

download: NavigationJustify.zip

© Kometschuh.de | Impressum | GitHub | Facebook |