Ben's Hobbyhoekje -- CSS-menu met schuivende panelen III

CSS-menu met schuivende panelen III

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.
Door elk paneel als sub-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.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 86 (mei 2016), pag. 48 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 aangepast en is de (summiere) code compleet gemaakt.

We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Klik op een van de vijf kolommen en sluit af met het kruisje in het rode vlakje rechtsboven.

Opmerking: Het voorbeeld werkt alleen goed op op desktop- en laptopcomputers, en dan alleen als het browser-window breder is dan de breedte van alle panelen / foto's / bijschriften samen. Als daar niet aan is voldaan verschijnt de meest rechtse foto vergroot in beeld, overlappen de foto's elkaar en/of verschijnen de (verborgen) panelen rechts in beeld.

Opmerking: Dit werkt niet op apparaten die draaien op Android. Vermoedelijk omdat de render-motor de CSS niet goed behandelt.

Toon het voorbeeld

Er worden twee items besproken:
1. De werking van het script.
2. 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 <div>-tag met id="content". Dit zorgt ervoor dat de vijf verticale panelen bij elkaar worden gehouden.
- Binnen de content staat voor elk paneel een <div>-tag met de klassen panel en een 'volgnummer': one, two, enz. Hiermee worden de afmetingen van de panelen vastgelegd, alsmede de opmaak.
- Binnen elk paneel staat een titel (met klasse panelcontent) en een kleine foto.
- Als je op een paneel klikt schuift een paneel in beeld met een grote foto, wat tekst en een "sluiten" knop. Dit wordt geregeld via onclick die de function start() aanroept, met het volgnummer van het paneel als parameter.
  Elke foto in de panelen heeft onclick="return false". Dit is iom te voorkomen dat het script ontspoort als ke op een foto klikt.
- Na de tag <div id="content"> volgt voor elk paneel een <div>-tag met id="panelX" (X is het volgnummer). Deze bevat de volgende zaken:
  - Het kruisje rechtsboven. Dit zit in de <div class="cross">. ALs je op het kruisje klikt wordt het paneel gesloten. Dat gebeurt door de function finish(), die wordt gestart via onclick.
  - De foto. Deze wordt altijd rechts gepositioneerd, met marges links en rechts van 40px.
  - De titel. Dit is een <h1>-tag.
  - De broodtekst. Deze bestaat uit een samenvatting en de tekst zelf, in <p>-tags (in het voorbeeld is dat de lipsum).
  - De voettekst. Dit staat in een <p>-tag met de klasse footer.
JavaScript
Het JavaScript zorgt ervoor dat de panelen het scherm in- en uitschuiven.
Als de function start() wordt aangeroepen, wordt aan het betreffende paneel de klasse mover toegekend. De klasse definieert de verschuiving via een transform.
Als de function finish() wordt aangeroepen, wordt de klasse mover verwijderd van het betreffende paneel. Daardoor schuift het paneel van het scherm.
De JavaScript-code moet helemaal aan het eind van de <body> staan, omdat alle elementen met een id bij de browser bekend moeten zijn om het script correct te laten functioneren.
CSS
De CSS staat in de file styles.css. Die moet je veranderen om het goed te laten werken.
In elk geval zul je de kleuren willen aanpassen, alsook het lettertype en de grootte van de letters.
Zelf een site mee bouwen
Download de .zip-file en pak hem uit. Hernoem de file html518a.htm naar bijvoorbeeld index.html.
Maak de code zoals hier is aangegeven.
Kies een aantal kolommen. In het voorbeeld staan vijf kolommen. Als je er meer of minder wilt kan dat door de CSS aan te passen: Verander in styles.css de waarde van width in de klasse panel. Voor 4 kolommen gebruik je 25%; voor 6 kolommen gebruik je 16.67%.
Pas het JavaScript aan. Voeg code toe of verwijder code voor meer of minder panelen. Pas ook de HTML aan voor meer of minder panelen.
Kies de foto's. Zorg voor twee formaten: een grote voor in het schuivende paneel en een kleinere voor in de kolommen.
Zorg er voor dat de kleinere foto's dezelfde afmetingen hebben. Stel in .panel img de waarde van margin-left in op -1 × de helft van de breedte van de kleine foto. In het voorbeeld is dat -125px, want de kleine foto's zijn 250 px breed.
Kies het lettertype en de kleuren. Zet die in styles.css.
Schrijf de teksten.
Tenslotte
Deze code is niet responsive en is daardoor niet geschikt voor kleine beeldschermen. Daarbij komt nog dat er een tweede verticale scrollbalk ontstaat als de document-afmetingen op het scherm kleiner zijn dan 1320 × 850 pixels. De reden waarom dat gebeurt is voor mij een raadsel.
Weet je waarom dit gebeurt? Stuur me een mailtje!
Deze techniek is zeer geschikt voor een presentatie op een groot scherm.

Gebruik:

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

De code van het voorbeeld ziet er als volgt uit:
(Alleen de code voor het eerste paneel wordt getoond)

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY>).

<div id="content">
<div class="panel one" onclick="start('1')">
<div class="panelcontent">Molen</div>
<img src="foto-1.jpg" alt="" height="187" width="250" border="0">
</div>
.
.
</div>

<div id="panel1">
<div class="panelinpanel">
<div class="cross" onclick="finish('1')">X</div>
<img src=foto-1-groot.jpg" style="float:right; margin:0 40px">
<h1>Molen</h1>
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>Lorem ipsum dolor sit amet, ... est laborum.</p>
<p class="footer">De foto is afkomstig van
<a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Ben's Fotoalbum</a>.</p>
</div>
</div>

(Zet dit aan het einde van de <BODY>, dus net voor de </body>-tag).

<script>
var content = document.getElementById("content");
var panel1 = document.getElementById("panel1");
.
.
function start(seqno) {
content.classList.add("mover");
switch (seqno) {
case '1': panel1.classList.add("mover"); break;
.
.
}
}
function finish(seqno) {
content.classList.remove("mover");
switch (seqno) {
case '1': panel1.classList.remove("mover"); break;
.
.
}
}
</script>

Downloaden:

Druk op de knop: File: voorb518.zip, 2737 bytes.