Accentsconagua

Slik bygger du en Off-Canvas-meny med CSS og et trykk på JavaScript

Webdesign
Share

I denne opplæringen vil vi gå gjennom en enkel, men effektiv metode for å lage en off-canvas-meny med HTML, CSS og JavaScript.

For å få en innledende ide om hva vi skal bygge, ta en titt på den relaterte CodePen-demoen (sjekk ut den større versjonen for en bedre opplevelse):

Merk: Denne opplæringen vil ikke fokusere på hvordan du gjør av-lerretmenyen tilgjengelig eller responsiv, så de ville sikkert være gyldige neste trinn.

1. Begynn med merking

Våre oppslag består av to innpakningselementer:

  • de .top-banner element
  • de .top-nav element

Her er HTML-koden:

2. Neste Vi trenger noen CSS

Med oppslaget klar, la oss nå undersøke de viktigste stilene som kreves for vår meny.

Merk: For lesbarhets skyld er denne CSS-koden ikke optimalisert - du vil se dupliserte egenskaper som du kanskje vil stripe ut i din egen versjon.

Styling topp banner Element

De .top-banner element ser slik ut:

Når det gjelder stiler, gjør vi følgende:

  • Sett bredden tilsvarer vindusbredden minus bredden på .meny-wrapper element.
  • Sett høyden lik vindushøyden.
  • Definer det som en flexbeholder. Dette vil tvinge overlegget til å dekke hele foreldrehøyden.
  • Bruk fleksboksen til å sentrere innholdet på overlegget vertikalt.

Her er stilene vi trenger for å oppnå alt dette: 

.topp-banner display: flex; bredde: calc (100% - 150px); høyde: 100vh; transformere: translateX (150px); bakgrunn: url (IMAGE_PATH) no-repeat center / fixed; . topp-banneroverlegg display: flex; flex-retning: kolonne; begrunn-innhold: center; bredde: 350px; polstring: 20px; overgang: transformer .7s; farge: hvit; bakgrunn: rgba (0, 0, 0, .7);

Styling topp-nav Element

De .top-nav element ser slik ut:

I dette tilfellet gjør vi følgende:

  • Angi de direkte barnelementene som faste posisjonerte elementer som dekker vinduets høyde.
  • Bruk flexbox til å justere loddrett .fast-menyen element.
  • Skjul .meny-wrapper element som standard. For å gjøre det, gir vi det ikke en eiendomsverdi som skjerm: ingen. Faktisk bruker vi oversette() funksjonen å flytte den 200px til venstre. Husk at elementets bredde er 350px, så en del av den er fortsatt innenfor visningsporten. Det er imidlertid ikke synlig fordi elementet er plassert under .fast-menyen element.
  • Skjul menylisten.

Se på de tilsvarende CSS-stilene nedenfor:

.top-nav. menu-wrapper posisjon: fast; topp: 0; venstre: 0; bunn: 0; bredde: 350px; polstring: 20px; transformere: translateX (-200px); overgang: transformer .7s; bakgrunn: # B1FFE5;  .top-nav. menu-wrapper .menu opacity: 0; overgang: opacity .4s;  .top-nav .fixed-menyen posisjon: fast; topp: 0; venstre: 0; bunn: 0; display: flex; flex-retning: kolonne; bredde: 150px; polstring: 20px; Bakgrunn: Akvamarin;

3. Nå for noen JavaScript

På dette punktet bruker vi noen grei JavaScript-kode for å manipulere tilstanden til av-lerret-menyen. 

La oss beskrive de nødvendige tiltakene:

  • Når .meny-open knappen klikkes, menyen skal vises med en fin lysbildeffekt, og overlegget skal skyves samtidig til høyre. Eventuelt kan vi gjøre mye flere ting i denne tilstanden. I vårt eksempel legger vi til en bokseskygge til ::før pseudo-element av overlegget og avsløre menylisten med en fade-in effekt.
  • Når .meny-close knappen klikkes, menyen forsvinner med en fin uttrekkseffekt, og overlegget må skyves samtidig til venstre.

Her er JavaScript-koden som implementerer denne oppførselen:

const menuOpen = document.querySelector ("top-nav. menu-open"); const menuClose = document.querySelector (". topp-nav. menu-close"); const menuWrapper = document.querySelector (". topp-nav. menu-wrapper"); const topBannerOverlay = document.querySelector ("top-banner-overlay"); funksjon toggleMenu () menuOpen.addEventListener ("klikk", () => menuWrapper.classList.add ("er åpnet"); topBannerOverlay.classList.add ("er flyttet");); menuClose.addEventListener ("click", () => menuWrapper.classList.remove ("er åpnet"); topBannerOverlay.classList.remove ("er flyttet"););  toggleMenu ();

Og under finner du de tilhørende CSS-stilene:

.topp-banner-overlay.is-flyttet transform: translateX (350px);  .top-banner-overlay.is-flyttet :: før innhold: "; posisjon: absolutt; topp: 0; bunn: 0; høyre: 100%; bredde: 20px; boks-skygge: 0 0 10px svart; .top-nav .menu-wrapper.is-åpnet transform: translateX (150px); .top-nav .menu-wrapper.is-åpnet .menu opacity: 1; overgangsforsinkelse: .6s;

4. Nettleserstøtte

Denne demoen vil fungere godt bare på desktop-nettlesere. Mobile enheter krever et annet sidelayout, men det er utenfor omfanget av denne opplæringen. Som vanlig bruker vi Babel til å kompilere ES6-koden ned til ES5.

Det eneste små problemet jeg opplevde mens jeg prøvde det, er tekstendringsendringen som skjer når overlegget blir animert. Selv om jeg prøvde ulike tilnærminger foreslått i forskjellige Stack Overflow-tråder, kunne jeg ikke finne en enkel løsning for alle operativsystemer og nettlesere. Så vær oppmerksom på at du kanskje ser små skriftgengivelsesproblemer da overlegget blir animert.

Konklusjon

Det er det, folkens! Vi klarte å bygge en nyttig off-canvas-meny med relativt enkel kode. 

Jeg håper du likte det endelige resultatet, og du vil bruke det som inspirasjon for å skape enda kraftigere menyer uten lerret. Og selvfølgelig, hvis du bygger noe, ikke glem å dele dem med oss!

Lær mer Off-Canvas Techniques

Webdesign
×