Menu met aparte achtergronden

Hiernaast zie je een vrij fors uitgevallen menu. Als je er met de muis overheen gaat, verandert de achtergrond van het menu-item in een inzoomende foto.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken, maar zonder de foto's.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 82 (december 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 auteur is niet bij het betreffende artikel genoemd.

Voor deze site is de CSS iets vereenvoudigd en is de vormgeving van het voorbeeld aangepast. Het werkt alleen in combinatie met een muis, dus niet met een aanraakscherm.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit twee delen: HTML en CSS (in de file styles.css). JavaScript wordt niet gebruikt.
   
• HTML
• Het menu is een enkele <nav>-tag, met daarbinnen voor elk menu-item een <a>-tag. Om het menu op het scherm te positioneren is het geheel omsloten door een <div>-tag.
• De links in het voorbeeld doen niets. Vervang href="#" door je eigen URL's om het werkend te krijgen.
   
• CSS
• Behalve het verwerken van een klik met de muis op een link wordt dit hele menu door CSS behandeld.
• De positionering in het document gaat met div nav {…}. Het menu staat aan de rechter kant. Links van het menu is wat witruimte gemaakt met margin-left.
• Allereerst wordt het menu als geheel opgemaakt en krijgt het afmetingen. De achtergrondkleur is #3757a7, dit is een blauwe tint. Het lettertype wordt ingesteld op Trebuchet MS. De tekstkleur komt later.
• De links die binnen de <nav>-tag liggen worden nu opgemaakt. De lettergrootte, kleur, enz. worden ingesteld.
  De achtergrond is transparant, waardoor je de blauwe kleur van het menu ziet. Onder normale omstandigheden is dat niet nodig, maar omdat de achtergronden en de linkteksten door de animatie worden veranderd, moet het hier wel.
• Ook wordt er wat geregeld voor de achtergrond-foto's. Dat moet gebeuren voor het renderen van de menu-links, dus wordt <nav a:before> ingezet. de afmetingen zijn 100% van de hooget en breedte van de box waar de link in staat. Dat wil zeggen: (2 × 12px van de padding + 24px van de tekst) hoog en 150 px breed. De binnen- en buiten marges zijn nul. De achtergrond foto wordt geschaald naar de volle breedte van de box, de hoogte van de foto wordt automatisch geschaald met de zelfde schaalfactor als de breedte.(background-size: 100% auto;)
  De achtergrond wordt onzichtbaar gemaakt (opacity: 0;).
  Er is een transition gedefinieerd voor background-size en opacity.
  •   Meer over de pseudoklasse :before lees je in het item Content opmaken met :before en :after.
   
• Als je met de muis over een link gaat, verdwijnt de onderstreping. Die komt weer terug als de muis niet meer op de link staat.
• Als je met de muis over een link gaat, wordt de achtergrondfoto zichtbaar. Die zoomt in tot 150% van de oorspronkelijke waarde. De animatie wordt gestuurd door de transition die genoemd is bij <nav a:before>.
• Per link is er een iets ander gedrag:
  •   Bij de molen wordt de linktekst blauw en verandert in 'Gemaal'. Dat wordt geregeld met nav a:nth-child(1):before. Het wordt gemaakt door content: een waarde te geven (die was door nav a:before leeg gemaakt).
  •   Bij de paddenstoel wordt de linktekst donkergrijs en verandert in 'Meer'. Dat wordt geregeld met nav a:nth-child(2):before, op de zelfde manier als bij nav a:nth-child(1):before.
  •   Bij de roos lijkt er niets te veranderen. De linktekst blijft wit en de tekst blijft 'Roos'. Maar omdat content: in nav a:before leeg is gemaakt, moet content: in nav a:nth-child(3):before opnieuw een waarde krijgen.
  •   Bij het park (nav a:nth-child(4):before) wordt alleen de linktekst opnieuw ingesteld.
   
• Toepassen in je eigen site
• Downlod de .zip-file en pak hem uit.
• Ze de code in je document, zoals hier onder is aangegeven.
• Pas de opmaak aan door in de file styles.css te wijzigen.
• Regel een stel mooie foto's voor de achtergrond van de menu-items. Maak ze bij voorkeur allemaal even breed. Maak ze ook niet veel breder dan het menu zelf, dat scheelt downloadtijd.
   
• Een menu-item verwijderen doe je door een <a>-tag te verwijderen uit de <nav>-tag in de HTML. Uit de CSS verwijder je dan het laatste blok nav a:nth-child():before.
• Een menu-item toevoegen doe je door een <a>-tag toe te voegen aan de <nav>-tag in de HTML. Aan de CSS voeg je dan een nieuw blok nav a:nth-child():before toe.

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> op de plaats waar het menu moet verschijnen).

<div>
  <nav>
    <a href="#">Molen</a>
    <a href="#">Paddenstoel</a>
    <a href="#">Roos</a>
    <a href="#">Park</a>
  </nav>
</div>

Downloaden:
 
Druk op de knop:  File: voorb105.zip, 868 bytes.