Aan de linkerkant van dit document staat een menu. Als je er met de muis over heen gaat, verschuift het item, licht de
tekst op en krijgt de achtergrond een andere kleur.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken.
N.B.: De links in het menu doen niets.
Dit is een bewerking van een voorbeeld dat ik vond In Webdesigner Magazine nr. 95 (mei 2017), pag. 62 e.v.
Het blad Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. Het script is gemaakt door
Mark Shufflebottom.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- 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).
Er komt geen JavaScript aan te pas.
- HTML
- De HTML van het menu is een enkele <nav>-tag met daarbinnen een unordered list (<ul>).
- De lijst-items (<li>) bevatten de links.
- CSS
- In de CSS wordt als eerste de nav-tag opgemaakt. Deze is fixed op de pagina, helemaal links en op 25% van de hoogte van het document. De achtergrond is transparant.
- Ook wordt in nav het lettertype opgemaakt. De text-decoration is none. Dat is voor de <a>-tags in het menu.
- De links staan in een unordered list, waarvan de bullet zijn uitgeschakeld. Verder zijn de binnen- en buitenmarges op nul gezet. Voor de hyperlinks in het menu is text-decoration:none nog eens ingesteld, om te voorkomen dat de onderstreping zichtbaar wordt als de muis er overheen gaat of als de link actief is.
- De schuine stand van het menu wordt geregeld door aan de <a>-tags de klasse tilt te geven. De breedte is 80px, dat wordt minder door de verdraaiing. De verdraaiing zelf wordt gemaakt met transform:rotate(-20deg).
- De schuine lijntjes worden gemaakt met border-bottom.
- Om de animatie soepel te laten verlopen is transform ingezet.
- Als de muis boven een menu-item komt, wordt tilt:hover actief. De kleuren van tekst en achtergrond worden aangepast.
De verschuiving wordt verkregen door de oorsprong van het element met 30% te verplaatsen, naar links en naar boven.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals op deze bladzijde wordt beschreven.
- Pas de CSS aan aan je eigen voorkeuren: Kleuren, lettertype, karaktergrootte.
- De item staan nu onder een hoek van 20° met de horizontaal, omhoog. Als je de items naar beneden wilt draaien verander je het teken van rotate().
- Zet de menu-items niet te schuin. 30° is wel het maximum, anders wordt het lastig leesbaar.
- Zorg er voor dat er geen content onder het menu doorschuift. Op deze pagina is dat gedaan door margin-left in te stellen op 60px, voor de elementen <p>, <ul> en <blockquote> (dit zijn de elementen op deze pagina die tegen de linker marge aanliggen).
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">
<style> /* Dit is voor dit document */
p, ul, blockquote { margin-left:60px; }
</style>
(Zet dit ergens in de <BODY> bijvoorbeeld net na de <BODY>-tag).
<nav>
<ul>
<li><a href="#" class="tilt">Home</a></li>
<li><a href="#" class="tilt">Over …</a></li>
<li><a href="#" class="tilt">Contact</a></li>
</ul>
</nav>
Downloaden:
Druk op de knop:
File: voorb570.zip, 845 bytes.
Opmerking:
Een versie van dit voorbeeld met het menu in de rechtermarge is er ook. Zie het item
Schuin menu rechts op de pagina.
