Toon nieuwe content als ergens op wordt geklikt
We beginnen met een voorbeeld. Dat toont een webpagina met alleen een menu en een regeltje tekst. Als je op een menu-item klikt, "opent" de pagina zich en krijg je de content te zien.
Inspiratie voor dit item is gekomen door een artikel in Webdesigner Magazine nr. 93 (februari 2017), pag. 20 e.v.
Het blad Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel
genoemd.
Voor deze website is het voorbeeld verfraaid en aangepast aan de stijl van deze website.
De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de plaatjes.
- Dit is zeer geschikt voor het maken van een portfolio of een product-presentatie.
- Er worden twee items besproken:
- De werking van het script.
- Zelf een site mee bouwen.
- De werking van het script
- De code van het voorbeeld bestaat uit HTML (in het document) en CSS voor de opmaak en de animatie (in de file styles.css).
Voor de begroeting (Goedemorgen -middag -avond -nacht) wordt wat JavaScript ingezet (in het document). Een beschrijving van
dat script vind je HIER. Het blijft verder buiten beschouwing.
- HTML
- De HTML van het voorbeeld bestaat uit twee delen:
• De 'aanklikbare' gedeelten van de pagina.
• De blokken met de content. - In het voorbeeld zit het aanklikbare deel in een menu dat altijd zichtbaar is. Dat is mijn persoonlijke voorkeur.
Je kunt de aanklikbare delen natuurlijk ook verspreid over het voorblad zetten, maar dan moet je in de content zelf voorzieningen treffen om het content-blok te sluiten. - Het menu is gemaakt met een enkele <nav>-tag, met daarin gewone <a>-tags, die refereren aan een unierk id.
- Het voorblad is een <div>-tag met id="sluit". Dat zit helemaal boven in de <body>, zodat alle andere content wordt verborgen buiten het scherm.
- De overige content zit in een <main>-tag. De afzonderlijke bladzijden zitten elk in een <atricle>-tag elk met een uniek id.
- Binnen elk <article> staat content. Alle geldige HTML is hier mogelijk.
- CSS
- Allereerst wordt een beperkte reset toegepast op het html-element en de body. De binnen- en buitenmarges worden op nul gezet en het document wordt uitgespreid over de hele breedte en hoogte van het window. Lettertype en achtergrond worden ingesteld en scrollbalken worden uitgeschakeld.
- Daarna wordt main ingesteld. Dat werkt hier als wrapper voor de drie article's met content. Merk op dat
hier overflow: auto. Er kunnen dus weer scrollbalken ontstaan!
Hierna volgen de opmaak van het voorblad met de daarin voorkomende h2 en p. - Nu komen we bij het interessante stuk van de CSS: De bladzijden met content.
Binnen main is een aantal (in het voorbeeld: drie) article's, die allemaal wel ruimte innemen, maar verder onzichtbaar zijn (visibility:hidden). - Voor main article:target (dus als een article binnen main het doel is van een hyperlink) wordt een
animatie gedefinieerd. Deze heet 'open', verloopt lineair en duurt 1 seconde. De eindtoestand van de animatie blijft behouden.
De bijbehorende keyframes staan helemaal onderaan in het bestand.
Zie ook het item Over @keyframes. - Een article dat target wordt na een muisklik op het menu wordt tegelijk met het starten van de animatie zichtbaar gemaakt (visibility:visible).
- De animatie begint met de bovenkant van het content-blok halverwege het window, en hoogte nul. De bovenkant van het blok
verschuift naar boven en de hoogte wordt 100%. Op deze manier lijkt het alsof het content-blok open klapt.
Merk op dat de bovenrand van het content-blok onder de menubalk verdwijnt. Dit vang je op door voldoende witruimte bovenaan het content-blok te houden, bijvoorbeeld met padding. - De drie verschillende achtergrondkleuren worden ingesteld met main > article:nth-of-type(). Dat betekent dat
het eerste, tweede, derde, enz. article een eigen achtergrondkleur krijgt.
Dit is een moeilijke manier om iets eenvoudigs te doen. Simpelweg refereren aan het –unieke– id van de drie article's levert hetzelfde resultaat, maar de code is bete leesbaar.
- Voor de menubalk, waarvoor nav is gebruikt, hoeft alleen de opmaak van de balk zelf en de hyperlinks te worden ingesteld.
- De bovenbalk wordt met position:fixed; aan de bovenrand van het window vastgeplakt. De balk is even breed als het
window. De kleur van de gewone tekst is zwart, de hyperlinks zijn wit, zonder onderstreping.
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html555a.htm naar index.html of iets dergelijks. Je hebt nu een werkend voorbeeld.
- Pas de opmaak aan naar je eigen smaak.
- Zet de content in de <article>-tags.
- Als je Menu-items wilt verwijderen doe je dat door de betreffende <a>-tag te verwijderen uit <nav>.
Let daarbij ook op de verticale strepen. Die staan achter elke <a>-tag, behalve achter de laatste.
Verwijder ook de overeenkomende <article>'s uit de <main>-tag. Haal ook de betreffende CSS voor main > article:nth-of-type() weg. Zorg er daarbij voor dat er geen gaten ontstaan in de nummering van de opeenvolgende nth-of-type()-regels.
Het verwijderen van het menu-item "Sluiten" is mogelijk, maar wordt niet aanbevolen, omdat je dan opgesloten raakt in de pagina (tenzij je in de content een link maakt om er uit te komen). - Menu-items toevoegen doe je door links toe te voegen binnen de <nav>-tag. Let daarbij ook op de verticale
strepen zoals eerder is genoemd.
Voeg de overeenkomende <article>'s toe aan de <main>-tag. Maak ook de betreffende CSS voor main > article:nth-of-type(). Zorg er daarbij voor dat er geen dubbelingen ontstaan in de nummering van de opeenvolgende nth-of-type()-regels.
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" media="screen" href="styles.css">
(Zet dit aan het begin van de <BODY>).
<nav>
<a href="#blz1">Bladzijde 1</a> |
<a href="#blz2">Bladzijde 2</a> |
<a href="#blz3">Bladzijde 3</a> |
<a href="#sluit">Sluiten</a>
</nav>
(Zet dit in de <BODY>, na het menu).
<div id="sluit">
<h2>
<script>
// JavaScript code
</script>
</h2>
<p>. . .</p>
</div>
(Zet dit in de <BODY> na de code voor het voorblad).
<main>
<article id="blz1">
<h1>Bladzijde 1</h1>
<p>Op deze bladzijde is te zien hoe je er gewone tekst inzet.
Plaatjes kunnen natuurlijk ook…</p>
<p><img src="foto1.jpg" alt=""
height="187" width="250" border="0">
.
. </p>
</article>
<article id="blz2">
<h1>Bladzijde 2</h1>
<p>Deze pagina is leeg, op wat <a href="html-267.htm"
target="NewBen2">lipsum</a> na.</p>
<p>Lorem ipsum . . . est laborum.</p>
</article>
<article id="blz3">
<h1>Bladzijde 3</h1>
<p>Deze pagina is leeg, op wat <a href="html-267.htm"
target="NewBen2">lipsum</a> na.</p>
<p>Lorem ipsum . . . est laborum.</p>
</article>
</main>
Downloaden:
Druk op de knop:
File: voorb555.zip, 1971 bytes.
