CSS-menu met schuivende panelen IV
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 opvallende animaties.
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.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 87 (juni 2016), pag. 14 e.v. Dit
blad 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 site is de vormgeving van het voorbeeld stevig opgepimpt en is de code uitgebreid en verbeterd.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Kies uit het menu links boven en let op de manier
waarop de pagina's worden gewisseld.
- Er worden twee items besproken:
- De werking van het script.
- Zelf een site mee bouwen.
- De werking van het script
- De code bestaat uit HTML, JavaScript en CSS (in de file styles.css).
- HTML
- De HTML5-structuur is hier van belang:
- De <body> begint met een <nav>-tag, die het menu bevat.
- Het menu van het voorbeeld bevat drie <a>-tags, die elk naar een uniek bookmark refereren, via het id. Als je er op klikt wordt ook de JavaScript-function toggleTekst() uitgevoerd, waarover later meer.
- Het laatste item van het menu is Reset. Daarmee breng je de pagina terug in de begin-toestand.
- Het tweede deel van de <body> is een <main>-tag, die de content bevat.
- <main> is verdeeld in drie <article>-tags, elk met een id dat gebruikt wordt als bookmark.
- Vóór de drie <article>-tags is er een <p>, die de rode tekst op het scherm zet.
- Elke bladzijde is op dezelfde manier vormgegeven. Dat oogt rustig.
De titel is <h1>, gevolgd door een foto die aan de rechterkant wordt gehouden met een inline-style. De tekst zelf staat in een <p>. - De voettekst (link naar mijn fotosite) staat in een <p> met klasse footer.
- CSS
- De CSS staat in de file styles.css. Die moet je aanpassen voor je eigen gebruik.
- De CSS lijkt ingewikkeld, maar als je er even goed naar kijkt zie je dat het toch vrij eenvoudig is. Een diepgaande bespreking
blijft achterwege, later op deze pagina wordt genoemd wat je kunt veranderen of juist niet.
- JavaScript
- Het JavaScript bevat één function, toogleText(). Deze functie zorgt er voor dat de rood gekleurde tekst "Maak uw keuze uit het menu" transparant (lees: onzichtbaar) wordt als er een content-pagina wordt getoond. Daarmee wordt voorkomen dat de tekst tijdens het wisselen van de pagina's door het effect heen schijnt.
- Als 'Reset' wordt gekozen uit het menu wordt de rood gekleurde tekst zichtbaar gemaakt (parameter in de aanroep is 'aan'),
anders wordt de tekst transparant (parameter is 'uit').
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html520a.htm naar bijvoorbeeld index.html.
- Maak de code zoals hier is aangegeven, voeg zelf pagina's toe of verwijder ze. Let er daarbij op dat de HTML-structuur niet verandert.
- Kies de foto's. Het mooiste effect krijg je als ze allemaal even groot zijn.
- Maak de hoeveelheid content (in de panelen) niet te groot, anders wordt het al gauw onoverzichtelijk.
- De CSS in styles.css is redelijk ingewikkeld. Hier is een opsomming van wat veranderd mag worden.
- Het begint met instellingen voor de <body>. display en height kun je beter niet veranderen.
- Daarna volgen main en main p. Behalve display en overflow kun je alles naar eigen inzicht instellen.
- In #begin kun je elke kleur neerzetten die je wilt.
- In article moet je display, position, opacity, box-sizing en overflow niet
veranderen.
Wees voorzichtig als je width aanpast: Als die te groot is, past het menu linksboven niet meer en gaat de schermindeling verloren. - Verander bij transition alleen de tijd, niet de dingen die worden geanimeerd.
- In article:target moet je opacity niet veranderen.
- article h1 en article p kun je aanpassen zoals je wilt.
- Het menu wordt opgemaakt met nav. Laat position onveranderd.
- nav p en nav a kun je opmaken naar eigen inzicht.
- De klasse .footer, met daarbij .footer a en .footer a:hover kun je opmaken zoals je wilt.
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">
<script>
function toggleTekst(aanUit) {
var aa = document.getElementById("begin");
if (aanUit == "aan") aa.style.color = "#d00;";
else aa.style.color = "transparent";
return;
}
</script>
(Zet dit in de <BODY>; alleen het menu en de code voor de eerste pagina wordt getoond).
<nav>
<p>Menu</p>
<a href="#page1"><span
onclick="toggleTekst('uit')">Molen</span></a>
<a href="#page2"><span
onclick="toggleTekst('uit')">Paddenstoel</span></a>
<a href="#page3"><span
onclick="toggleTekst('uit')">Roos</span></a>
<br>
<a href=""><span onclick="toggleTekst('aan')">Reset</span></a>
</nav>
<main>
<p id="begin">Maak uw keuze uit het menu</p>
<article id="page1">
<h1>Molen</h1>
<img src="foto1.jpg" alt="" height="187" width="250" border="0"
style="float:right; margin-left:40px">
<p>Rechts op de foto staat de molen "Nooit Gedacht", in
Spijkenisse. De foto dateert uit de tijd van vóór
de verhoging en is genomen vanaf het spuikanaal.</p>
<p class="footer">De foto is afkomstig van
<a href="https://www.webmasterij.nl/fotoalbum"
target="_blank">Ben's Fotoalbum</a>.</p>
</article>
.
.
</main>
Downloaden:
Druk op de knop:
File: voorb520.zip, 1828 bytes.
