CSS-menu met draaiende panelen

Zoals bij meer items op deze site, is de techniek die hier wordt besproken bij uitstek geschikt voor een één-pagina site. Dat is een (meestal) kleine website, die ייn onderwerp behandelt. Dit soort sites wordt vaak ingezet om kortdurende evenementen te promoten of om iets te presenteren. Soms bevat zo'n site spectaculaire animaties, soms zijn ze heel eenvoudig.
Door elk paneel als menu te gebruiken kun je het ook inzetten voor een meer complexe website.

Op deze bladzijde wordt zo'n ייn-pagina site uitgebreid besproken. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de foto's. We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Het navigatie-menu staat rechts.

Dit is een vrije bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 94 (maart 2017), pag. 14 e.v.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. Het script is gemaakt door Upian, een ontwerp- en productiebedrijf uit Parijs.

Voor deze website is het voorbeeld verfraaid. Een onvolkomenheid is gerepareerd.
De code kun je downloaden om zelf te gebruiken en/of aan door te ontwikkelen, echter zonder de foto's.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Zelf een site mee bouwen.
   
• De code bestaat uit HTML en CSS (in de file styles.css) en JavaScript (in het document).
   
• De werking van het script
• Door een klik of tik op een van de menu-items in de rechter bovenhoek w9rdt de functie tekstUit() geactiveerd, die de tekst "Maak uw keuze uit het menu rechts" laat verdwijnen. De animatie wordt vervolgens uitgevoerd door CSS, getriggerd door een <a href="#…">-tag.
   
• HTML
• De HTML bestaat uit twee delen: Een <nav>-tag met daarin het menu, en een <main>-tag met daarin de nuttige content.
• Het menu is een <ul>-tag waarvan elk lijst-element een <a>-tag bevat, dat refereert aan het id van een <article> binnen de <main>-sectie.
  Een klik op de <ul> start de function tekstUit().
• De <article>'s binnen de <main>-sectie bevatten elk één <section> met de content die hoort bij het betreffende menu-item. Elk <article> heeft een eigen id dat door CSS wordt gebruikt om het gekozen <article>zichtbaar te maken.
   
• CSS
• Het menu in de <nav>-tag wordt in de rechter bovenhoek gepositioneerd en vastgezet. Omdat het menu altijd zichtbaar moet zijn, is z-index:9999; ingesteld. Lettertype en andere opmaak zijn hier ook vastgelegd.
• Het menu zelf is een reeks <a>-tags, elk in een list-items van een <ul>,waavan de onderstreping en de bullets zijn verwijderd.
   
• De CSS van de <main>-sectie is nogal gecompliceerd. Dat komt door de animatie en doordat CSS wordt gebruikt om te reageren op een menu-keuze, waar JavaScript eenvoudiger te behappen is.
• Als eerste wordt voor html en body een paar instellingen gemaakt: Het document beslaat altijd de volledige hoogte en breedte van het bowserwindow en is altijd zichtbaar. Verder worden de binnen- en buitenmarges op nul gezet en wordt de achtergrondkleur ingesteld.
• De <h2> binnen <main> bevat font-weight:lighter. Dat lijkt niet in alle browsers goed te werken.
• Vervolgens wordt ingesteld wat voor de hele <main>-sectie geldt: relatieve positionering en altijd zichtbaar. Verder zal er een verticale scrollbar worden getoond als dat nodig is. Dat gaat via overflow:auto. Om dat te laten werken moet de hoogte worden ingesteld, hier is dat 100%;
• De <article>s binnen <main> zijn absoluut gepositioneerd en beslaan de hele <main>. Bedenk daarbij dat er nooit meer dan één <article> tegelijk zichtbaar kan zijn. Via clip-path wordt een ronde uitsnede gemaakt. Hiervoor wordt de function circle() ingezet, met straal 50vh, het middelpunt van de cirkel ligt in het middelpunt van het <article>-element. Eventuele overflow wordt verborgen.
• Als een <article> doel is van een <a>-tag (na een klik op het menu) wordt z-index op 999 gezet. Merk op dat dit altijd lager is dan de z-index van het menu. Dat blijft dus altijd zichtbaar.
  Dit verloopt via de pseudoklasse target.
• Nu is het de beurt aan de <section>s die binnen de <article>s binnen de <main>. De breedte van de <section>is 40% van de breedte van het <article>, maar die mag oplopen tot 100% via max-width. De hoogte is steeds 100%.
• De <section>s worden bij het laden van de pagina -180° gedraaid, rond een punt aan de onderkant van het document, halverwege de breedte van het document. Als dat wordt veranderd duurt de transition 5 seconden.
  De binnenmarge (padding) is 2em (boven en onder). Links en rechts wordt die ingesteld op 50% van de documentbreedte, min 200px. Dat wordt berekend met calc().
• Als een <article> doel is van een <a>-tag (na een klik op het menu) wordt de rotatie van de <:section> veranderd van -180° on 0°
• Het voorbeeld bevat vier <article>s. De achtergrondkeur wordt per <section> binnen het <article> apart ingesteld met behulp van nth-of-type().
• Tenslotte wordt voor de <h1>-koppen binnen de sections de opmaak nog geregeld.
   
• JavaScript
• Het JavaScript bevat één function, tekstUit(), die wordt aangeroepen als er op het menu wordt getikt of geklikt. Deze maakt de tekst "Maak uw keuze uit het menu rechts" onzichtbaar door display op none te zetten.
   
• Zelf een site mee bouwen
• Download de zip-file en pak hem uit. Hernoem de file html772a.htm naar index.html. Je hebt nu een werkend voorbeeld.
• Voeg menu-items toe aan de navigatie, of verwijder ze juist. Dat doe je door <li>-elementen toe te voegen aan, of te verwijderen uit, de <ul> binnen de <nav>.
  Daarnaast voeg je <article>s toe aan de <main>-sectie, of verwijder je die juist.
  Voor elke toegevoegde of verwijderde <article> maak, of verwijder, je een regel met main > article:nth-of-type(i) section.
• Verander de achtergrondkleuren van de opeenvolgende <article>s naar je eigen smaak. Zorg ervoor dat de kleuren iets van elkaar verschillen, anders wordt het effect moeilijk te zien.
• Kies kleuren voor de koppen en de broodtekst, regel illustraties, etc. Voer vervolgens de broodtekst in en plaats de illustraties.
• Test het geheel grondig. Vooral bij grote bowserwindows kan de content buiten de section lopen.
   
• Tenslotte...
• Voor dit soort websites moet de broodtekst kort zijn, anders komt de boodschap niet over.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
 
</script>

(Zet dit in de <BODY> op de plaats waar .....)

code
code

Downloaden:
 
Druk op de knop:  File: voorb772.zip, 1926 bytes.

Opmerking:
 
...