In deze tutorial maken we een menu dat schuivend in beeld komt. Dat kan op 3 verschillend manieren:
Het geheel is gerealiseerd zonder gebruik te maken van JavaScript!!
:checked en :hover::before
~ selector en de spatie
Instructie: doorloop deze instructiefilmpjes en probeer zelf ook een pagina te maken waarbij de inhoud opzij schuift om het menu te laten zien.
In de video wordt veel met element-selectoren gewerkt, maar geef zelf jouw elementen een eigen bedachte class-naam en gebruik die als sector in jouw CSS.
Na een manier te hebben voorgedaan probeer je zelf op soortgelijke manier de 2 andere animaties op aparte pagian's te maken en in het menu aan elkaar te koppelen.
Je ziet hier een voorbeeld van een site waarbij elke pagina op een andere manier het menu in beeld laat schuiven:
Dat ga je ook proberen te maken.
De body heeft een navigatie-element en een main-element als children.
Er is al CSS toegevoegd, maar enkele kenmerken voor het wegschuif-effect worden toegevoegd.
De opmaak zit in een extern stijlblad, dat voor alle pagina's gebruikt kan worden.
Om te meer zicht te krijgen op wat er gebeurt, heeft de body voorlopig een rode achtergrond gekregen.
Met nav a wordt alleen en alle de linken in het navigatie element geselecteerd.
Het is een afstammelingselector: je selecteert daarmee dus een element dat ergens genest is in een ander element.
Het hoeft niet noodzakelijk een kind te zijn, maar kan ook een kleinkind of achterkleinkind, enz zijn.
Dit in tegenstelling tot de kind-selector >.
We komen de eerste pseudo-class tegen :hover. Het element wordt alleen geselecteerd als hij in een bepaalde toestand is. In dit geval als er een muis boven zit.
Voor de user is het prettig als er een actieve link is. Die geeft aan welke van de linken bij de huidige pagina is. Deze wordt daarom apart gestild. In de mark-up geeft je de betreffend link een class mee, zodat die in de CSS vorm te geven is. https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Combinatoren
De inhoud heeft een witte achtergrond, zodat je ziet over de body komt.
Wellicht moet je hem ook nog een minimale hoogte van 100vh geven zodat hij de viewport tenminste bedekt. (Dit zie je niet in het filmpje!)
Omdat de CSS, die nu komt alleen voor deze pagina gaat gelden, gaat dat in het interne stijlblad.
Door de navigatie een position: absolute; te geven, 'voelt' de inhoud dit niet meer en schiet de inhoud naar boven.
De inhoud zou opzij moeten schuiven, en krijgt daarom een marge, die net zo breed is als de breedte van de navigatie.
Dan wordt hij smaller, maar dat is lelijk. De inhoud krijgt dus een breedte van 100vw, zodat de teksten en het plaatje niet verlopen.
(In het filmpje wordt vergeten de inhoud ook nog box-sizing: border-box; te geven,
want de padding moet de breedte niet verder vergroten.)
De inhoud moet over de rand van de viewport gaan en daarom krijgt de body een overflow-x: hidden, zodat er geen horizontale scroll-balk ontstaat.
Om de styling van de inhoud te sturen maken we en checkbox.
Met de pseudo-selector :checked bij de checkbox, kun je iets stijlen dat een sibling is van de checkbox.
Daarom wordt hij ook direct na de opening van d body geplaatst. Door het checken kan dus zowel de navigatie als de inhoud worden gestyled.
Je selecteert de sibling (broer/zus) met ~ (tilde)
Door de checkbox, te checken krijgt de inhoud wel of geen negatieve marge. Je kunt dat natuurlijk ook met een andere eigenschap doen.
De navigatie zal onder de inhoud vallen als deze ook een position absolute krijgt.
Geen je de inhoud een transition op de eigenschap ,die deze verplaatst, dan zal de overgang een animatie krijgen.
::before en ::after. Als je een van deze hebt gekozen, kan je met de unicode tabel het hamburger-teken ☰ plaatsen:
Het teken met unicode U+2640 plaats in de CSS met de waarde "\2640". De inhoud in de HTML kan dan weg.
Omdat het hamburger teken met CSS wordt gemaakt, kun je het ook met CSS wijzigen in een sluitknop.
In de unicode-tabel zijn er 2 varianten: U+2716 en U+2715. Dar maken we een keuze uit.
De gecheckte checkbox kan dan met de tilde selector het label in de inhoud de andere waarde voor de content geven.
Vervolgens wordt het label gesteld, zodat het wat groter is en voor de gebruiker duidelijk uitnodigt om te klikken.
Als afwerking kan de check-box nu wel worden verborgen, en de achtergrondkleur van de body wat meer passend bij het menu.
Met gebruik van cubic-bezier voor de easing kan de animatie van het schuiven een ander karakter krijgen. Zie http://cubic-bezier.com/
We lopen nog tegen 3 of 4 foutjes aan.
De inhoud blijkt padding te hebben, maar toch het scherm uit te lopen.
De breedte is op 100vw ingesteld, maar de padding maakt het element breder, omdat die daar nog bijkomt.
Om dit op te lossen geven we de inhoud een box-sizing met border-box als waarde.
Als er verticaal gescrolld wordt schuift het men uit beeld.
Dit is opgelost als we het menu een position fixed geven.
Bij een test in de inspector gaat het bij een mobile toestel verkeerd.
Allereerst zijn de link naar de bron en de kop te breed voor de viewport.
Met een ­ plaats je een optioneel afbreekstreepje.
Een text-overflow: ellipsis; zorgt ervoor dat de rest van de link als drie puntjes wordt weergegeven.
Dan blijkt er nog steeds sprake van een mogelijkheid om horizontaal te scrollen in de emulatie van de iPhone. Door het html-element ook een overflow-x: hidden te geven is het me wel gelukt om deze bug te boven te komen.
bron:
https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565
Maak er nog 2 pagina's bij:
Hier staat ook nog een oudere versie van deze opdracht.
Maak een vierde pagina, waarbij het menu aan de rechterkant tevoorschijn komt.