What is a good lightweight CSS responsive grid

Responsive navigation

The hamburger icon

The hamburger icon has established itself as a switch for the most important menu on the site. The first maxim for barrier-free access to the navigation menu is:

Click instead of: hover

We have to get used to that: Most visitors come with a cell phone or tablet - that is, without a mouse. hover is on the hit list: Perhaps the touchscreen reacts to a light touch, but most of the time the: hover state on the touchscreen freezes. Two clicks must replace the hover states.

The finger on the touchscreen

Everything must be easily accessible with the finger. While the mouse is an exact device for clicking and hovering over an element, the finger is an unpredictable area.

All buttons and all links must be large enough that the touch of the finger hits the element exactly. 40 x 40 pixels is the minimum. There must be a gap between consecutive links.

The little gray box with 40 x 40 px:

Submenus must be recognizable and accessible. The big hierarchical drop-down menus of the past are obsolete. Even if they seem logical and systematic to us, visitors don't think in hierarchical categories, they prefer to look for the right topic in the search field.

Many sub-categories are better stored in distinctive design elements of the layout: in carousels, in the sidebar, at the foot of the page.

tempus

Nulla aliquet nisl quam, quis condimentum mi sagittis eu.

risus metus

Sed vel sollicitudin lorem. Suspendisse risus metus, posuere lectus.

dapibus

Duis vulputate sodales turpis, sed ultricies turpis dapibus quis.

Menu without Javascript

On to the next step for barrier-free navigation: It should work without Javascript, but simply be controlled by HTML and CSS.

The Hamburg icon and the navigation menu are the top elements of the page and should be available as soon as possible.

Hamburger made of pure HTML, no icon font, animated with CSS

Of course, nothing speaks against polishing the navigation menu to a high gloss with Javascript (progressive enhancement).

Top navigation

The hamburger icon is the first step and consists of just a few lines of HTML and CSS.

HTML
<div class="row"> <input type="checkbox" id="hamburg"> <label for="hamburg" class="hamburg"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </label> <nav class="topmenu"> <ul> <li><a href="/tutorial/css-transform.html">Home</a></li> <li class="hassub">Submenü <ul> <li><a href="/css/css-selektor-kontextselektor.html">Selektoren</a></li> <li><a href="/css/breakpoints.html">Breakpoints</a></li> </ul> </li> <li><a href="/css/transitions.html">Transition</a></li> <li><a href="/html/input-checkbox.html">Checkbox</a></li> </ul> </nav> </div>

The HTML structure works without wrappers. <input type="checkbox" id="hamburg"> is the only additional HTML tag that animates the hamburger and displays the navigation menu.

Menu items with a submenu must not be links, otherwise the risk is too great that the finger on the touchscreen triggers the link before the submenu opens.

Animate the menu with CSS

Instead of a div tag, the hamburger icon sits in a label tag. The label tag is connected to the input element by the for attribute and reacts synchronously with the input element to clicks and touches on the touchscreen. That's the checkbox hack.

CSS
nav.topmenu {height: auto; max-height: 0; overflow: hidden; transition: all 0.5s; }

The menu remains hidden.

Because height not from height = "0" to height = "auto" can be animated, hides max-height: 0 along with overflow: hidden the navigation menu.

transition: all 0.5s; prepares the menu for its appearance.

Now it will be exciting, because if label.hamburger is clicked or checked, not only must the Hamburg icon be animated, but also open the navigation menu.

Context selectors catch an element depending on its position in the HTML. So another deep look at the HTML structure:

<input type="checkbox" id="hamburg"> <label for="hamburg" class="hamburg"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </label> <nav class="topmenu"> … </nav>

Read selector from right to left: that nav.topmenuthat on .Hamburg follows when #Hamburg is checked.

#hamburg: checked + .hamburg + nav.topmenu {max-height: 600px; }

External sources