CSS-menu met schuivende panelen II
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.
We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. Beweeg de muis over de vijf kolommen.
Door op een kolom te klikken of te tikken verschijnt de bijbehorende tekst. Als er alleen een aanraakscherm is en geen muis,
ontbreekt de animatie.
Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 79 (september 2015), pag. 56 e.v. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De auteur is niet bij het betreffende artikel genoemd.
Voor deze site is de vormgeving van het voorbeeld aangepast. Het werkt niet op een aanraakscherm, een muis is noodzakelijk.
- 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> staat alleen een <div>-tag met id="container". Dit zorgt ervoor dat het geheel bij elkaar wordt gehouden.
- Bovenaan in de container staat een <h1>-tag met daarin de paginatitel.
- Vervolgens is er een paragraaf met de melding dat je met de muis over de panelen moet gaan om het menu te zien werken.
- Daarna is er een navigatie-tag (<nav>) Daarin worden de vijf panelen opgebouwd.
- Onderaan in de container staat een voettekst (<footer>-tag).
- Voor elk paneel is er een <a>-tag Daar in staat de content die hoort bij het betreffende paneel cq. menu-item.
- In het voorbeeld bevat het href-attribuut een JavaScript-opdracht om een alert te tonen. In de praktijk staat hier een URL, die verwijst naar een pagina binnen of buiten je website. Daardoor werkt het als menu. Als je dat niet wilt, dus als je alleen de panelen wilt gebruiken, geef je href="" mee. Daardoor blijft de cursor een handje. Als je de cursor gewoon een pijltje wilt laten zijn, laat je het href-attribuut weg.
- Elke <a>-tag bevat:
— Een foto. Dit is <img>-tag die een .jpg laat zien op ware grootte. Er zijn dus geen height- en width-attributen en ook geen CSS-eigenschappen. De linker marge is -0.5em. Dat zorgt er voor dat de foto tijdens de animatie mooi blijft aansluiten aan de linkerkant.
— Een <span>-tag. Deze dient als menu-tekst en als titel voor de tekst in het uitgeschoven paneel. De opmaak verloopt via de CSS-functie nth-child(1).
— Binnen deze <span>-tag staan nog twee <span>-tags. De eerste bevat de menu-tekst. Deze wordt zwart van kleur als het paneel openschuift. De tweede bevat de beschrijvende tekst (nth-child(1)). In het voorbeeld is dat lorem ipsum tekst.
- 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 1000px 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 en een geschikte padding ziet het er goed uit.
- De hyperlinks binnen <nav> hebben display:inline-block. Daardoor blijven ze zoveel mogelijk 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, is de pseudo-class :target ingezet,
zie bovenin het CSS-bestand. Omdat deze niet aan een element is gebonden, geldt de target voor alle elementen die een target nodig
hebben. Hier zijn dat de panelen, die een transition hebben.
Het zorgt er voor dat het bewegende paneel altijd zichtbaar is en dat de afmetingen waarmee het paneel getoond wordt een vaste verhouding hebben tot de container waarin het getoond wordt.
In dit geval krijgt het paneel de breedte van 50% van de container, wordt de achtergrond heel licht grijs (#fafafa) en wordt de letterkleur bijna zwart (#333). - De vijf panelen zijn allemaal op dezelfde manier opgemaakt, met o.a een blauwe achtergrond en witte tekst.
De blauwe achtergrond naast de foto's (als een paneel is opengeklapt) is gemaakt met border-right:500px solid #3757a7. De rand is zo breed dat deze fungeert als achtergrond. - Het verbreden en versmallen van de vijf panelen gebeurt met een transition, die 1 seconde duurt. Omdat het keyword
all is meegegeven aan de transition, gaan de veranderingen van de achtergrondkleur (van blauw naar wit) en van de tekst
(van wit naar zwart) ook in 1 seconde.
- De <footer> bevindt zich binnen de container. Hij is onderaan gezet met position:relative en
bottom:0. De voettekst is dus niet aan de onderkant van het window gepind. Daardoor kan de voettekst uit beeld scrollen.
- In de huidige stand van de techniek (augustus 2017) is voor transition in de grote browsers geen vendor-prefix
(meer) nodig, uiteraard mits de browsers goed up-to-date zijn gehouden.
- Deze code is niet responsive en daardoor minder geschikt voor kleine beeldschermpjes.
- Zelf een site mee bouwen
- In het voorbeeld staan vijf kolommen. Als je er minder wilt kan dat zonder aanpassing van de code. Het is te overwegen om
de kolommen (nav a)dan wat breder te maken (nu 18.5%, neem bijv.20% of 22.5%), of om de container smaller te maken
(nu 1000px).
Kolommen toevoegen is ook mogelijk, maar dat is lastiger; maak container breder (nu 1000px) en/of nav a (nu 18.5%) - Download de .zip-file en pak hem uit. Hernoem de file html006a.htm naar bijvoorbeeld index.html.
- Neem de naam van de foto-bestanden op in de file html006a.htm, 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. Kies het font en de letterhoogte die je mooi vindt voor jouw toepassing.
- Voeg menu-items toe (in de betreffende <a>-tags, of verwijder ze juist.
- Vervang de koppen en de lipsum-tekst door je eigen content (inclusief
de <footer>).
- Maak de hoeveelheid content (in de panelen) niet te groot, anders wordt het al gauw onoverzichtelijk.
- 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 nav a.
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 panelen menu.</h1>
<p>Beweeg met de muis over de panelen om het menu te zien werken.</p>
<nav>
<a href="javascript:window.alert('Molen')">
<img src="foto-1.jpg" alt="Molen">
<span>Molen
<span>De molen van Spijkenisse, … .</span>
<span>Lorem ipsum dolor sit amet, … laborum.</span>
</span>
</a>
<a href="javascript:window.alert('Paddenstoel')">
<img src="foto-2.jpg" alt="Paddenstoel">
<span>Paddenstoel
<span>Deze paddenstoel stond ooit in de buurt van Holten.</span>
<span>Lorem ipsum dolor sit amet, … laborum.</span>
</span>
</a>
.
.
.
</nav>
<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: voorb006.zip, 1956 bytes.
