met een ID van "fade" die onze zwarte omslag zal zijn die de inhoud donkerder maakt wanneer op het menupictogram wordt geklikt.
Uiteindelijk bellen we jQuery in via Google en ons eigen scriptbestand, waar we een beetje aan het werk zijn. Maar laten we eerst de stijlen doornemen.
Styling met CSS
We zullen dus niet alle CSS-stijlen doornemen (als je wilt dat je de demo kunt bekijken of 'bekijken' op de demo), omdat ze in de meeste gevallen worden gebruikt voor de algemene vormgeving van de pagina, wat niet het doel is van dit artikel. We zullen het opbreken en een paar stukjes code bekijken die belangrijk zijn voor het effect. Dus allereerst:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
We schoppen dingen door ervoor te zorgen dat als de browser van de gebruiker geen JavaScript beschikbaar heeft (dat is die klassennaam op het HTML-element dat we eerder zagen met behulp van Modernizr) we de # fallback-nav in de koptekst tonen, en we zullen de # fade DIV evenals het navigatiepictogram verbergen. Dit is onze uitwijkoplossing, dus het fallback-menu moet op een meer traditionele manier worden gestyled. We verbergen deze oplossing ook als JavaScript beschikbaar is, zoals u kunt zien op de laatste regel.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Dus in deze sectie stylen we ons menupictogram in de kop, het is vrij eenvoudig, we geven het een relatieve positie en een hoge Z-index (wat later nuttig zal zijn wanneer de rest van de inhoud vervaagd zal blijven) top). We veranderen ook de kleur in wit als het een klasse "open" heeft die we zullen toevoegen en wegnemen met jQuery. We kunnen ook zien dat de enkele div met een id van "fade" zich uitstrekt om het hele scherm te vullen en gevuld met een effen zwart met een transparantie van 50%. Als de gebruiker geen JavaScript heeft, zal dit zwarte filter worden verborgen, anders verbergen we het met jQuery. Laten we nu eens kijken naar het menu zelf:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Dus last but not least het hoofdmenu. Ik moet er allereerst aan toevoegen dat dit de vereenvoudigde code is die nogal wat prefixen van leveranciers nodig heeft voordat deze compatibel zijn met andere browsers. Om dit te bereiken, beveel ik het gebruik van een geweldige tool zoals Autoprefixer om alle juiste prefixen voor u toe te voegen.
Dat gezegd hebbende, laten we eens kijken naar wat het inhoudt: ten eerste heeft het een vaste positionering bovenaan die pagina en een negatieve 250px aan de rechterkant. Dit betekent dat het er is, maar slechts "off-screen" (omdat het een maximale breedte van 250 pixels heeft). De hoogte is ook 100%, zodat deze het hele venster van boven naar beneden vult. Het menu heeft ook een z-index nodig tussen 0 en 9 (boven het zwarte filter). Dan, hier is wanneer de magie gebeurt, het heeft een display: flex; eigendom, evenals een andere gekoppelde eigenschap van 'flex-richting' (die we hier hebben ingesteld op 'kolom' in plaats van de standaard 'rij', wat betekent dat de flexitem kinderen - de links in het menu - de volledige hoogte van zijn ouder in gelijke delen).
Dus dat is allemaal gericht op de menu-houder # main-nav, vervolgens geven we bij het stylen van de links een flexwaarde van 1. Dit zorgt ervoor dat de links de hele hoogte gelijkmatig vullen. Vervolgens krijgen deze links zelf ook een weergavewaarde van 'flex', wat betekent dat alle elementen binnen de links hierdoor worden beïnvloed. We zorgen ervoor dat de flexrichting nog steeds 'kolom' is en we voegen een eigenschap toe van 'justify-content: center;'. Hierdoor wordt de tekst zelf in de links ook verticaal gecentreerd (vandaar dat er divs in de ![]()
tags van de # main-nav, die niet precies semantisch is, maar een zeer snelle en gemakkelijke manier is om items verticaal te centreren.)
Nu kunnen we niets zien wat we zojuist hebben gedaan, we moeten nu onze functionaliteit toevoegen met ons eigen scripts.js-bestand dat we eerder hebben genoemd.
De functionaliteit toevoegen met jQuery
Het script voor dit effect is erg klein en eenvoudig, maar ik zal het hier eerst eerst plaatsen en dan uitleggen wat er gebeurt:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Anim ({right: "0"}, 400); $ (this) .removeClass ('closed') .) .addClass ( 'open') html ( 'x'). $ ( '# fade') fadeIn (); } else if ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Anim ({right: "-250px"}, 400); $ (this) .removeClass ('open ') .addClass (' gesloten ') html (.' ☰. '); $ (' # fade ') fade-out (); }});});
Dus eerst en vooral verbergen we het zwarte filter. Vervolgens wordt alles wat we doen opgenomen in een functie die is gekoppeld aan een klikgebeurtenis die is gekoppeld aan de menupictogramkoppeling. Als er op wordt geklikt, hebben we twee verschillende gevallen of situaties; één is wanneer het menu al is verborgen (zoals de standaardstatus) of een wanneer het menu wordt weergegeven. Dus de link van het menupictogram heeft een klassenaam van gesloten die we hebben toegevoegd, en we hebben ook gestileerd voor open. Onze eerste "als" -instructie is dat als de link wordt gesloten (daarom standaard). Als dat het geval is, dan is het geheel
element is 250 pixels geanimeerd aan de linkerkant en stopt het scrollen van de pagina. De # main-nav div wordt ook geanimeerd op zijn plaats, we veranderen de juiste waarde van -250 px naar 0. Dan verwijderen we de klasse van 'gesloten' van de link en voegen we een 'open' toe evenals verander de HTML van het speciale karakter van drie regels naar een "x". Eindelijk vervagen we in ons zwarte filter om de rest van de inhoud donker te maken. En dat is het! Dat geeft ons de open status van het menu.
Nu is de "else if" -instructie gericht op de open klasse op de menulink. Wanneer dit het geval is, doen we het omgekeerde van alles wat we eerder deden, het lichaam terug in positie te brengen en het menu opnieuw van het scherm te verplaatsen. De klasse van 'open' verwijderen uit het menupictogram, 'gesloten' toevoegen en de inhoud terugzetten naar het pictogram en onze # fade div uitfaden. Als alles volgens plan verloopt, moet de functionaliteit er als volgt uitzien:
Conclusie
Dus daar hebben we het! Dat is een manier om dit coole effect te creëren dat we nu steeds vaker zien in de stijl van modern webdesign, vooral op het gebied van mobiele ontwerpen. Dit effect is een leuke en eenvoudige oplossing die geen plug-ins vereist en volledig kan worden aangepast aan de behoeften van elk project. Ook was het een kans om gebruik te maken van zowel flexbox als een paar andere handige tools. Laat het me weten in de comments of er iets is dat je anders zou hebben gedaan of wat je dacht!
Uitgelichte afbeelding / thumbnail, schuifdeur afbeelding via Shutterstock.
