med en ID av "fade" som vil være vår svarte omslag som mørkner innholdet når menyikonet klikkes.
Til slutt kaller vi i jQuery fra Google og vår egen skriptfil som er hvor vi skal jobbe litt. Men først, la oss gå gjennom stilene.
Styling med CSS
Så vi kommer ikke til å gå gjennom alle CSS-stilene (hvis du vil at du kan inspisere eller se kilden på demoen) som de hovedsakelig brukes til generell styling av siden, noe som ikke er målet av denne artikkelen. Vi vil bryte den opp og se på noen få kupler av kode som er viktige for effekten. Så først og fremst:
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; }
Vi vil sparke ting ved å sørge for at hvis brukerens nettleser ikke har JavaScript tilgjengelig (det er dette klassenavnet på HTML-elementet som vi så tidligere ved hjelp av Modernizr), viser vi # fallback-nav i overskriften, og Vi vil skjule #fade DIV så vel som navigasjonsikonet. Dette er vår tilbakebetalingsløsning, slik at tilbakekallingsmenyen må styles på en mer tradisjonell måte. Vi skjuler også denne løsningen hvis JavaScript er tilgjengelig, som du kan se i den siste linjen.
#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; }
Så i denne delen styler vi vårt menyikon i toppteksten, det er ganske enkelt, bare å gi det en relativ posisjon og en høy z-indeks (som vil være nyttig senere når resten av innholdet blir bleknet ut, vil det fortsette topp). Vi endrer også fargen til hvit når den har en klasse av "åpen" som vi legger til og tar bort ved hjelp av jQuery. Vi kan også se at den enkelte div med et ID for "fade" strekker seg for å fylle hele skjermen og fylt med en solid svart med 50% gjennomsiktighet. Hvis brukeren ikke har JavaScript, vil dette svarte filteret bli skjult, hvis ikke, vil vi gjemme det med jQuery. La oss nå se på menyen selv:
#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; }
Så sist men ikke minst hovedmenyen. Jeg må først legge til at dette er den forenklede koden som vil trenge ganske mange leverandørprefikser før de blir kompatible med nettleseren. For å oppnå dette anbefaler jeg å bruke et fantastisk verktøy som Autoprefixer å legge til alle de korrekte prefiksene for deg.
Så det blir sagt, la oss se på hva det innebærer: først og fremst har det fast posisjonering øverst på siden og negativ 250px til høyre. Dette betyr at den er der, men bare "off-screen" (som den har en maksimal bredde på 250px). Høyden er også 100%, slik at den fyller hele vinduet fra topp til bunn. Menyen trenger også en z-indeks mellom 0 og 9 (over det svarte filteret). Så, her er når magien skjer, den har en skjerm: flex; eiendom, samt en annen tilknyttet egenskap av "flex-retning" (som vi har satt til "kolonne" her i stedet for det er standard "rad", hvilket betyr at flex-elementet barn-linkene i menyen - fyller hele høyden av dets forelder i like deler).
Så det har alle vært rettet mot menyholderen # main-nav, neste når du styler linkene vi gir dem en fleksibel verdi på 1. Dette gjør det mulig for linkene å fylle hele høyden likt. Da er disse koblingene også gitt en visningsverdi av "flex" seg, noe som betyr at noen elementer inne i koblingene vil bli påvirket av dette. Vi sørger for at flex-retningen fortsatt er "kolonne" og da legger vi til en egenskap av "justify-content: center;". Dette gjør selve teksten til innsiden av koblingene sentrert vertikalt også (dette er grunnen til at det er divs inne i ![]()
tagger av # main-nav, som ikke er akkurat semantisk, men er en veldig rask og enkel måte å sentrere artikler vertikalt.)
Nå kan vi ikke se noe vi nettopp har gjort ganske, nå må vi legge til vår funksjonalitet med vår egen scripts.js-fil som vi ringte tidligere.
Legger til funksjonaliteten med jQuery
Skriptet for denne effekten er veldig liten og enkel, men jeg legger alt her først og deretter forklarer hva som skjer:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animate ({right: "0"}, 400); .) .addClass ( 'åpne') html ( 'x');. $ ( '# fade') fadeIn (); } annet hvis ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Animate ({høyre: "-250px"}, 400); $ (dette) .removeClass ') .addClass (' lukket ') html (.' ☰. '); $ (' # fade ") fadeout (); }});});
Så først og fremst skjuler vi det svarte filteret. Deretter vil alt vi gjør inneholde en funksjon knyttet til et klikkhendelse som er bundet til menyikonet. Når det klikkes, har vi to forskjellige tilfeller eller situasjoner; en er når menyen allerede er skjult (som standardstatus) eller en når menyen vises. Så linken til menyikonet har et klassenavn av lukket som vi har lagt til, og vi har også stylet for åpent. Vår første "if" erklæring er at hvis lenken er stengt (derfor standard). Hvis det er tilfelle, så hele
elementet er animert 250px til venstre, og stopper rullingen av siden. Den # main-nav div blir også animert på plass, vi endrer det er riktig verdi fra -250px til 0. Da fjerner vi klassen "lukket" fra koblingen og legger til en av "åpne" så vel som endre html fra spesialkarakteren til tre linjer til en "x". Til slutt blusser vi i vårt svarte filter for å gjøre resten av innholdet mørkt. Og det er det! Det gir oss den åpne tilstanden på menyen.
Nå er "else if" -oppgaven rettet mot den åpne klassen på menykoblingen. Når det gjør vi gjør omvendt av alt vi gjorde før, flyttet kroppen tilbake på plass, samt flyttet menyen på skjermen igjen. Fjerner klassen "åpen" fra menyikonet, legger til "lukket" og endrer innholdet tilbake til ikonet, og fader ut vår #fade div. Hvis alt går i henhold til planen, så er det slik funksjonaliteten skal se ut:
Konklusjon
Så det har vi det! Det er en måte å gjøre denne kule effekten som vi ser mer og mer nå med stilen til moderne webdesign, spesielt på mobile design. Denne effekten er en fin og enkel løsning som ikke krever noen plugins, og kan tilpasses alle behovene til hvert prosjekt. Det har også vært en sjanse til å benytte seg av flexbox samt noen andre nyttige verktøy. Gi meg beskjed i kommentarene hvis det er noe du ville ha gjort annerledes eller bare det du trodde!
Utvalgt bilde / miniatyrbilde, skyvedørsbilde via Shutterstock.
