CSS-menu met schuivende panelen V
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. 18 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 verfraaid.
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 en CSS (in de file styles.css). Er komt geen JavaScript bij kijken.
- 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 twee <a>-tags, die elk naar een uniek bookmark refereren, via het id.
- 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 twee <section>-tags, elk met een id dat gebruikt wordt als bookmark. Deze tags bevatten ook een data-attribuut, wat wordt gebruikt om de pagina-wisselingen te besturen.
- Het eerste paneel (de roos) verschuift horizontaal. Het tweede paneel (het park) verschuift verticaal. Ald je van de
roos naar het park gaat (of andersom) zie je beide bewegingen tegelijkertijd.
- 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.
De CSS voor de <section>-tag wordt nader toegelicht:
- section[data-transition] Dit geldt voor alle <section>-tags met de toevoeging [data-transition]. De waarde die er aan is toegevoegd doet niet ter zake.
- section[data-transition="horizontal"] Dit spreekt voor zich. In het voorbeeld is dat het paneel over de Roos, dat horizontaal in- en uit schuift.
- section[data-transition="horizontal"]:target Dit wordt actief als er een anchor (<a>-tag) actief wordt. In het voorbeeld betekent het dat het paneel met de Roos van left:-100% naar left:0 wordt geschoven. In 'rust stand' staat het paneel aan de linkerkant van het scherm, buiten beeld.
- Voor [data-transition="vertical"] geldt een soortgelijke redenering als voor [data-transition="horizontal"].
Zie het item Over * en [] in Style Sheets voor meer informatie over het toepassen van [data] in CSS. - Verdere bespreking van de CSS blijft achterwege, later op deze pagina wordt genoemd wat je kunt veranderen of juist niet.
- Zelf een site mee bouwen
- Download de .zip-file en pak hem uit. Hernoem de file html521a.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 lijkt redelijk ingewikkeld. Hier is een opsomming van wat veranderd mag worden.
- Het begint met instellingen voor de <body>. display, width en height kun je beter niet veranderen.
- Daarna volgt main. Behalve width. padding en background moet je onveranderd laten.
- Het menu wordt opgemaakt met nav. Laat position en display onveranderd.
- nav a kun je opmaken naar eigen inzicht. Laat display onveranderd.
- De belangrijkste opmaak van de panelen staat in section[data-transition]. Behalve de kleur van background en de tijdsduren in transition moet je dit niet wijzigen.
- De panelen worden buiten beeld geplaatst door
section[data-transition="horizontal"] en
section[data-transition="vertical"]. Deze blokken niet veranderen. - De panelen worden in beeld gebracht door
section[data-transition="horizontal"]:target en
section[data-transition="vertical"]:target. Ook deze twee niet veranderen, uitgezonderd z-index. Deze laatste verhogen als er andere dingen in je site staan die de huidige waarde van z-index hinderen. - section h1 en section p kun je aanpassen zoals je wilt.
- 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">
(Zet dit in de <BODY>; alleen het menu en de code voor de eerste pagina wordt getoond).
<nav>
<a href="#pag1">Roos</a>
<a href="#pag2">Park</a>
<a href="#" style="float:right; margin-right:80px">Reset</a>
</nav>
<main>
<section id="pag1" data-transition="horizontal">
<h1>Roos</h1>
<img src="foto1.jpg" alt="" height="187" width="250" border="0"
style="float:right; margin:0 140px 0 40px">
<p>Deze close-up van een roos is (vind ik) een van de beste foto's
die ik ooit heb gemaakt.</p>
<p class="footer">De foto is afkomstig van
<a href="https://www.webmasterij.nl/fotoalbum"
target="NewBen">Ben's Fotoalbum</a>.</p>
</section>
Downloaden:
Druk op de knop:
File: voorb521.zip, 1563 bytes.
