In het vervolg van deze training wordt het menu aangepakt met Javascript en zullen er teksten verschijnen als de gebruiker dat wenst. Gelieve hiervoor zoals het eerst filmpje hier laat zien, een kopie van de vorige training te maken en dit als een aparte training via een linkje aan te leveren.
Je ziet hier het te maken eindresultaat.
De site wordt gekopieerd. Na het kopiëren stuur je de Public Link van de Dropbox naar t.denblanken@ma-web.nl. Gebruikers van Komodo gooien het komodoproject-bestand in de nieuwe map weg en maken een nieuw project aan. Gebruikers van Dreamweaver definiëren een nieuwe site voor het vervolg. Het navigatie-menu gaat de hele breedte van de pagina krijgen en zal moeten worden gecentreerd.
Je kunt het menu eenvoudig de volledige breedte geven door van de html-tag en de body-tag de marge en padding op 0 te zetten.
In het stijlblad kun je de stijl aanmaken voor de actieve link. Veelal gaat dit door de selector 'nav a:hover' aan te vullen tot nav a:hover, nav a.actief.
In het script voeg je
$('nav a').removeClass("actief");
$(this).addClass("actief");
toe aan elke eventHandler van de knoppen. De eerste verwijdert (eventuele) klassen in het navigatiemenu, de tweede voegt hem juist toe aan de knop, waarop geklikt is: $(this)
Om een horizontaal menu te centreren, moeten we de breedte kennen, zodat met margin: 0 auto, het menu gecentreerd kan worden.
Er wordt een functie gemaakt, die van de aanwezige elementen de breedte berekend en het totaal daarvan teruggeeft.
De variabele totaalBreedte geeft die totale breedte. Hij zit in de functie meetBreedte(elementen). Van elk (each) van deze elementen wordt de breedte bepaald met var elementBreedte = $(this).width(). $(this) is het element dat in de each-functie aan de beurt is.
De info-knop heeft een andere functie dan de andere knoppen. Daarom wort hij apart geplaatst.
Het is de bedoeling dat een klik op deze knop tekstuele informatie geeft van het geselecteerde item uit het menu.
In de DOM staat de knop buiten de houder. Hij wordt absoluut gepositioneerd. Omdat hij binnen de container staat, moet die een relatieve positionering krijgen.
Door met ongelijke border-radius te werken, krijgt de knop de vorm van een ellips.
Als er op de info-knop geklikt wordt, verandert niet alleen het uiterlijk, maar ook de functie. Een tweede klik moet het omgekeerde teweeg brengen. Een soort aan- en uit-knop. In het Engels is dat toggle.
Hiervoor wordt een variabel gemaakt, die vaststelt of er op de knop is geklikt of juist niet: var infoNaarBoven.
Bij de info-knop wordt er gekeken naar de waarde van deze boolean.
Als je afhankelijk van een voorwaarde opdrachten wilt geven kan dit met een if-statement:
if(de voorwaarde) {
opdracht a...;
opdracht b...;
else {
andere opdracht c...;
ander opdracht d.....;
}
Ook zie je in deze film hoe er met de console gewerkt wordt.
via console.log krijg je opmerkingen, die je kunt teruglezen in het console venster.
De informatieve teksten worden geplaatst. Deze komen binnen de #houder, zodat ze later eventueel door de houder verborgen kunnen worden.
Ze worden absoluut gepositioneerd, om te beginnen buiten de houder. Ze staan binnen div's zodat ze eventueel uit meerdere paragrafen en koppen zouden kunnen bestaan. De inhoud wordt via het stijlblad ook in 2 kolommen gesplitst zodat de leesbaarheid verbetert.
Mocht je moelijkheden hebben met bijzondere tekens in de tekst, dan is deze link wellicht een uitkomst.
Alle div's met teksten liggen over elkaar. We schrijven in deze instructie een functie, die er één van deze toont.
Daarvoor moeten er eerst 2 klassen worden aangemaakt: .zichtbaar geeft het element weer en .onzichtbaar verbergt hem uit de DOM.
De functie met als argument het id van de div, maakt eventueel zichtbare div's onzichtbaar en neemt van de gekozen div de klasse onzichtbaar weg en voegt de zichtbaar-klasse toe.
De selectie gaat nu door het klikken van een knop.
De handeling moet dus worden uitgevoerd binnen de functie schuifgebieden.
Eerstr wordt er aan de array met objecten de id's toegevoegd van de pasende diva's.
Daarna wordt er een in de functie gehaald en aan de functie selecteerTekst gegeven.
Als dit werkt, kunnen de teksten onder de #houder worden verborgen. Dit kan het beste via het script,
zodat bij netwerken script de teksten benaderbaar blijven voor de bezoeker: "gracefull degradation".
De info tekst moet animeren.
In de beide info-knop-akties wordt de animatie-opdracht toegevoegd:
$('article div').animate( { top: bovenkant }, 2000);
De animatie moet naar de juiste hoogte gaan.
Om de hoogte te berekenen wordt de div.zichtbar uit de DOM genomen en daarvan de hoogte bepaald.
Deze wordt van 680 afgehaald en daarmee hebben we de juiste hoogte:
bovenkant = 670 - $('div.zichtbaar').height();
Dit blijkt te werken en nu moet het ook worden toegepast als er op een knop geklikt wordt.
Dit doen we dan in de functie selecteerTekst(tekstId).
Daar moet de animatie alleen worden uitgevoerd als we de tekst willen hebben: een if-statement op de boolean infoNaarBoven.
Plaats je resultaat on-line, bijvoorbeeld in de Public map van je Dropbox.
Stuur een link van de pagina (als dat nog niet gedaan is) naar t.denblanken@ma-web.nl.
In de Public map van Dropbox vind je die link door met je rechter muisknop op het bestand te klikken en te kiezen voor: Dropbox >> Copy Public Link.