Mobile First Interactie 📱
Je ziet de knop "Luister live" in de navigatiebalk staan. Dit is feed-forward, het laat zien dat je live kunt gaan luisteren zodra je op de knop klikt. Als feedback komt er een mediaplayer in beeld te staan, waar je naar de live-radio van het BNR kunt luisteren.
Om deze interactie te realiseren heb ik gebruik gemaakt van zowel HTML, CSS als Javascript. In de HTML heb ik een aparte 'section' gemaakt die ik verberg onder de navigatiebalk. Deze bevat een aantal 'divs' om een 'grid' op te stellen, waardoor ik alle elementen simpel kan positioneren binnen de mediaplayer. Hierbij heb ik alle elementen hun eigen 'class' of 'id' gegeven om deze via CSS gemakkelijk aan te kunnen spreken.
Over CSS gesproken, voor de mediaplayer heb ik een aantal properties moeten geven aan de gebruikte 'section'. Denk hierbij aan een achtergrondkleur, wat padding, maar ook een z-index om de mediaplayer daadwerkelijk achter de navigatiebalk te verstoppen! Ook is in de onderstaande afbeelding te zien hoe ik de 'grid' heb opgezet.
