Responsive menu bouwen met Flexbox, inclusief submenu’s

Elementen positioneren is altijd een gedoe geweest, ook al bestonden er systemen als block, inline-block en table. Of je nu met floats werkte of met inline-block, vroeg of laat liep je tegen problemen aan. Gelukkig is er vooruitgang geboekt: nu oude browsers als Internet Explorer geleidelijk verdwijnen, kunnen we onze elementen uitlijnen met de Flexbox-module. In deze tutorial laat ik zien hoe eenvoudig je met een handvol regels een menu bouwt.

Stap 1 – De basis

Voordat we CSS gaan schrijven, zetten we de basis van ons menu neer in HTML5.

html

<nav class="nav" role="navigation">
    <ul clas="menu">
        <li><a href="https://www.damienflandrin.fr/blog/post/#">Accueil</a></li>
        <li><a href="https://www.damienflandrin.fr/blog/post/#">Catégories</a></li>
        <li><a href="https://www.damienflandrin.fr/blog/post/#">À Propos de Moi</a></li>
        <li><a href="https://www.damienflandrin.fr/blog/post/#">Contact</a></li>
    </ul>
</nav>

Daarna geven we het menu een basisstijl:

css

.nav ul {
    margin: 0px;
    padding: 0px;
    background: tomato;
    list-style:none;
}

.nav a {
    padding: 1em;
    display: block;
    text-align:center;
    text-decoration: none;
}

Nu de basis van onze elementen staat, kunnen we het menu zelf aanpakken.

css

.nav .menu {
    display: flex; /*1*/
    flex-direction : row; /*2*/
    justify-content: center; /*3*/
}

1 – We zetten de weergave in flexbox-modus.
2 – Met flex-direction lijnen we de kinderen van het huidige element op één rij uit.
3 – Met justify-content plaatsen we die kinderen links, gecentreerd of rechts in het huidige element.

Met drie regels heb je het begin van een menu. Moet het rechts uitlijnen, dan zet je flex-end op de eigenschap justify-content. Wil je de rij omdraaien? Zet row-reverse op flex-direction. Flexbox is niet alleen eenvoudiger, het is ook heel flexibel. En de mobiele versie kost maar één regel.

css

.nav .menu {
    display: flex; /*1*/
    flex-direction : row; /*2*/
    justify-content: center; /*3*/

@media(max-width: 450px) {
      flex-flow: column wrap; /*4*/
    }
}

4 – Op een mobiele resolutie zetten we met flex-flow, de shorthand voor flex-direction en flex-wrap, de kinderen onder elkaar in een kolom en staan we het afbreken naar een nieuwe regel toe.

En klaar. Goed, het zijn er in werkelijkheid drie, maar daarmee staat er wel een eerste basisversie van ons responsive menu. Alleen: er zijn natuurlijk ook submenu’s, en die pakken we in de volgende stap aan.

See the Pen Menu responsive avec Flexbox – 1 by Damien Flandrin (@dam62500) on CodePen.

Stap 3 – De submenu’s

Voor een submenu maken we twee klassen: has-children voor een menu-item dat een submenu bevat, en de klasse sous-menu.

html

<!-- notre menu flexbox -->
    <nav class="nav" role="navigation">
        <ul class="menu">
            <li><a href="https://www.damienflandrin.fr/blog/post/#">Accueil</a></li>
            <li class="has-children"><a href="https://www.damienflandrin.fr/blog/post/#">Catégories</a>
                <!-- sous menu-->
                <ul class="sous-menu">
                    <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 1</a></li>
                    <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 2</a></li>
                    <li class="has-children"><a href="https://www.damienflandrin.fr/blog/post/#">Item 3</a>
                        <!-- un sous menu dans un sous-menu-->
                        <ul class="sous-menu">
                            <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 1</a></li>
                            <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 2</a></li>
                            <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 3</a></li>
                            <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 4</a></li>
                        </ul>
                        <!-- /un sous menu dans un sous-menu-->
                    </li>
                    <li><a href="https://www.damienflandrin.fr/blog/post/#">Item 4</a></li>
                </ul>
                <!-- /sous menu-->
            </li>
            <li><a href="https://www.damienflandrin.fr/blog/post/#">À Propos de Moi</a></li>
            <li><a href="https://www.damienflandrin.fr/blog/post/#">Contact</a></li>
        </ul>
    </nav>
<!-- /notre menu flexbox -->

In mijn voorbeeld zit er een submenu in een submenu (inception!), want dat soort gevallen kom je in de praktijk regelmatig tegen.

css

  .has-children { /*1*/
    position: relative;
  }

.has-children:hover > .sous-menu { /*2*/
    display: flex;
  }

.sous-menu { /*3*/
    display: none;
    flex-flow: column wrap;
    min-width: 100px;
    position: absolute;
    background: dodgerblue;
  }

.sous-menu a { /*4*/
    text-align: left;
    color:white;
  }

.sous-menu .sous-menu { /*5*/
    top: 0px;
    left: 100%;
    background: #1e76d6;
  }

1 – We positioneren het element relatief, zodat we het submenu ten opzichte van zijn parent kunnen uitlijnen.
2 – Staat de muisaanwijzer op een element met een submenu, dan tonen we dat submenu in flexbox-modus.
3 – We leggen het standaardgedrag van het submenu vast: standaard verborgen, in een kolom uitgelijnd, met een minimale breedte van 100 px (niet verplicht, maar zonder die regel zou het submenu in mijn voorbeeld belachelijk smal zijn).
4 – De tekst lijnen we links uit, puur voor het oog.
5 – Het sub-submenu zetten we op dezelfde hoogte als zijn parent en aan de rechterkant ervan (right: 0 px; zou in dit soort gevallen niet werken).

En de responsive variant:

css

.sous-menu {
    display: none;
    flex-flow: column wrap;
    min-width: 100px;
    position: absolute;
    background: dodgerblue;
    @media(max-width: 450px) {
      position: static;
    }
}

.sous-menu.is-active {
        display: flex!important;
}

.sous-menu a { /*4*/
    text-align: left;
        @media(max-width: 450px) {
      text-align: center;
    }
    color:white;
  }

.sous-menu .sous-menu {
    top: 0px;
    left: 100%;
    background: #1e76d6;
}

Regel de interactie met bezoekers op mobiel en tablet liever met JavaScript. En heb je submenu’s, bouw het menu dan als slide-in: in deze tutorial heb ik dat niet gedaan, maar voor je bezoekers werkt het een stuk prettiger.

javascript

$('.sous-menu').click(function(){
    if ($(window).width() < 450) {
        if($(this).hasClass('is-active'))
            $(this).removeClass('is-active');
        else
            $(this).addClass('is-active');
    }
});

See the Pen Menu responsive avec Flexbox – 2 by Damien Flandrin (@dam62500) on CodePen.

Browserondersteuning van Flexbox

Flexbox wordt behoorlijk goed ondersteund door de browsers, maar er zijn toch een paar dingen die je moet weten om die ondersteuning goed te benutten. Vandaag kun je Flexbox rustig gaan overwegen, en het lijdt geen twijfel dat het gebruik ervan de komende jaren flink groeit, ook binnen bekende frameworks als Bootstrap en Foundation.

Internet Explorer	Firefox	Chrome	Safari	Android
Ondersteuning vanaf Internet Explorer 10 met de prefix `-ms-`, daarboven zonder prefix.	Firefox 19 tot 21 met de prefix `-moz-`, daarboven zonder prefix	Tot versie 28 met `-webkit-`, daarboven zonder prefix	Tot 10 met `-webkit-`, daarboven zonder prefix	Met `-webkit-` tot versie 4.3, daarboven zonder prefix