Inhoud schuift voor menu opzij

Voor mobiele interfaces neemt een menu vak teveel ruimte in. In dit filmpje zie je dat je die kunt verbergen achter de inhoud. Als de gebruiker wil navigeren laat hij het menu tevoorschijn komen doordat de inhoud opzij schuift. Het hele effect wordt zonder script gerealiseerd! Daarvoor wordt de inhoud in een div geplaatst, maar het menu blijft daar buiten. Deze inhoud krijgt een relatieve positionering.
Het menu heeft een position: fixed;
Om met CSS vast te stellen of de gebruiker klikt wordt er een checkbox met een apart label aan de HTML toegevoegd. Het is belangrijk dat deze check-box een sibling (broer/zus met dezelfde ouder) is van de inhoud.
De gebruiker klikt op het label en checked of un-checked daarmee de checkbox. Als die als id dan bijvoorbeeld menuKnop heeft, dan kun je met de pseudo-selector #menuKnop:checked ~ .inhoud vertellen wat je met de inhoud wil als de menuknop gecheckt staat en met #menuKnop ~ .inhoud aangeven wat er moet gebeuren als deze niet gecheckt is.
In ons geval geven we de inhoud een left-waarde mee die net zo breed is als ons menu. Het effect werkt dan al.
Met de transition kun de de inhoud nog geanimeerd laten schuiven. Natuurlijk verstop je de checkbox en geef je het label een display block en wat volume zodat deze eenvoudig te raken is.

Zet deze training online en stuur mij een linkje.