Schuin menu links op de pagina

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.

Gebruik:

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 &hellip;</a></li>
    <li><a href="#" class="tilt">Contact</a></li>
  </ul>
</nav>

Downloaden:
 
Druk op de knop: Download deze code  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.

 
terug

html-570; Laatste wijziging: 7 mei 2020