CSS-menu met schuivende panelen
De techniek die hier wordt besproken is 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.
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. Klik een beetje rond op het menu in de bovenbalk.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 78 (juli 2015), pag. 58 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script en de auteur zijn niet meer te vinden op internet.
Voor deze site is de vormgeving van het voorbeeld aangepast.
- Er worden twee items besproken:
- De werking van het script.
- Zelf een site mee bouwen.
- De werking van het script
- De code bestaat uit twee delen: HTML en CSS (in de file styles.css).
- HTML
- De HTML5-structuur is hier van belang:
- Binnen de <body> bevindt zich alleen een <div>-tag met id="container". Dit zorgt ervoor dat het geheel bij elkaar wordt gehouden.
- Bovenaan in de container staat een <nav>-tag. Deze bevat de items in het menu. De links refereren via <a href="#">-tags aan bookmarks die zijn opgegeven als id, niet als name.
- Voor elke bookmark is er een <article>. Daar in staat de content die hoort bij het betreffende menu-item.
- De animatie bij het tonen van een article is per default van beneden naar boven. Dat zie je bij het item Een. Bij de andere vier items wordt dat overschreven met behulp van het attribuut data-transition, dat de waarden "left", "right", "zoom" en "fade" kan hebben. De CSS zorgt voor de juiste animatie.
- Elk <article> bevat:
— Een sluit-knop. Dit is <a href="#">-tag met data-button="close". Het is opgemaakt als rechthoek met afgeronde hoeken en een X er in. Het dient om het paneel te sluiten. Er is een hover-effect.
Zie het item Over het data-attribuut in HTML5-tags voor meer informatie over het data-attribuut.
— Een pagina-kop (<h2>-tag),
— Eventueel een foto (<img>-tag met alleen de naam van het foto-bestand, zonder verdere attributen. In dit voorbeeld is het nodig die apart in te stellen met CSS.
— Een of meerdere paragrafen met tekst (<p>-tag). In het voorbeeld is dat lorem ipsum tekst. - Onderaan de pagina staat een voettekst (<footer>-tag).
- CSS
- De CSS bevat een eenvoudige reset. Hier wordt ook het lettertype ingesteld.
- De container is het lichtgrijze blok waar de content in verschijnt. Dit is 800px breed en wordt gecentreerd op het scherm gezet.
- Om de navigatie staat een rechthoek. Die wordt ingesteld bij de <nav>-tag. Door gebruik van display:block, text-align:center en een geschikte padding ziet het er goed uit.
- De hyperlinks binnen <nav> hebben display:inline-block. Daardoor blijven ze altijd netjes naast elkaar
staan. Verder zijn ze 'normaal' opgemaakt. Ze hebben een hover-effect.
- Om te zorgen dat een paneel vanaf het begin van de transition zichtbaar is, heeft article de pseudo-class :target.
Dit zorgt er voor dat het bewegende paneel altijd zichtbaar is en dat de afmetingen waarmee het paneel getoond wordt een
vaste verhouding hebben tot het window waarin het getoond wordt.
Voorrang ten opzichte van andere CSS-eigenschappen wordt afgedwongen met !important. Met name bij zoom en fade is dat belangrijk. - De vijf panelen zijn allemaal op dezelfde manier opgemaakt, met o.a een donkere achtergrond en afgeronde hoeken. Ze zijn
alle vijf beneden het window (buiten beeld) gepositioneerd. Bij een klik op een link schuift het in beeld, van beneden naar
boven.
Vier van de vijf links hebben echter een attribuut data-transition, waardoor de panelen worden verplaatst v&oactute;&oactute;r de beweging begint. Bij optie Twee en Drie wordt het paneel van beneden het window naar links resp. rechts verplaatst. Daardoor schuiven deze panelen horizontaal i.p.v. verticaal.
Bij optie Vier wordt het paneel midden in het window gezet, met afmetingen 0% breed en 0% hoog, met opacity:0 (volledig transparant). Bij de transition worden de breedte en hoogte naar 100% gebracht en wordt opacity gelijk aan 1 (helemaal ondoorzichtig).
Bij optie Viif wordt het paneel midden in het window gezet, met de goede afmetingen. De opacity staat op 0 en ten overvloede is visibility hidden. Bij de transition wordt visibility visible gemaakt en wordt de opacity gelijk gemaakt aan 1. - Het opbrengen en verbergen van de vijf panelen gebeurt met een transition, die 2 seconden duurt. Dit geldt voor
alle wijzigingen van article.
- De <footer> is aan de onderkant van het window gepind met position:fixed en bottom:0. De breedte
is 60% van het window. De footer staat op 20% van de linker rand van het window. Daardoor staat hij altijd in het midden.
De footer kan breder worden dan de container.
- In de huidige stand van de techniek (juli 2017) is voor transition in de grote browsers geen vendor-prefix
(meer) nodig, uiteraard mits de browsers goed up-to-date zijn gehouden.
- Zie het item Over * en [] in Style Sheets voor meer informatie over het gebruik
van de data-attributen in CSS.
- Deze code is niet responsive en daardoor minder geschikt voor kleine beeldschermpjes.
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html493a.htm naar bijvoorbeeld index.html.
- Neem de naam van de foto-bestanden op in de files html493a.htm en styles.css, zoals hier onder is aangegeven. Je hebt nu een werkend template voor je site.
- Verander desgewenst de kleuren van de achtergrond en van de tekst.
- Voeg menu-items toe (met de bijbehorende <article>-tags, of verwijder ze juist.
- Vervang de koppen en de lipsum-tekst door je eigen content (inclusief
de <footer>).
- Maak de hoeveelheid content (panelen) niet te groot, anders wordt de pagina traag door (te) lange laadtijden.
- Als je wilt dat dit ook werkt met wat oudere browsers, moet je de vendor-prefix
-webkit- toevoegen aan de CSS-eigenschap:
— transition
Deze eigenschap vind je in de file styles.css bij de selector article.
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>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY>).
div id="container">
<h1>Schuivende en andere panelen.</h1>
<p>Klik op de knoppen om het voorbeeld te zien werken.</p>
<nav>
<a href="#een">Een</a>
<a href="#twee">Twee</a>
<a href="#drie">Drie</a>
<a href="#vier">Vier</a>
<a href="#vijf">Vijf</a>
</nav>
<p>Zoals je ziet zijn de knoppen niet allemaal even breed... </p>
<p style="text-align:justify">Lorem ipsum .... </p>
<article id="een">
<a href="#" data-button="close">X</a>
<h2>Een</h2>
<p>Lorem ipsum ... id est laborum.</p>
</article>
.
.
.
<article id="vijf" data-transition="fade">
<a href="#" data-button="close">X</a>
<h2>Vijf</h2>
<img src="foto4.jpg" alt="Hoogspanningslijn">
<p>Lorem ipsum ...</p>
</article>
<footer>
Fotos: Ben's online fotoalbum -
<a href="https://www.webmasterij.nl/fotoalbum"
target="BenFotoSiteWindow">www.webmasterij.nl/fotoalbum</a>
</footer>
</div><!-- container-->
Downloaden:
Druk op de knop:
File: voorb493.zip, 2481 bytes.
