Share
I denne opplæringen vil du opprette en utvidbar side navigasjonsmeny med JavaScript og CSS. Det endelige produktet vil vises som vist nedenfor:
For å komme i gang, la oss legge til noen oppslag for vår side-meny:
× Om funksjoner Kontakt oss
Her kan du se at vi opprettet en sidemeny div med klassen sidenav. Deretter la vi til den faktiske toppnavigasjonsnavigasjonen via a tag, og vi bruker en SVG for vårt side menyikon.
De ved trykk Attributt av ikonet og lukkeknappen vil utløse noe JavaScript, som vi legger til neste.
Husk å legge inn alt innholdet på nettstedet ditt inne i div beholder slik at den glir til høyre.
Deretter la vi legge til JavaScript for å gjøre openNav og closeNav funksjoner.
Til slutt må vi style vår side med noen CSS for sidemenyen og våre lenker:
/ * Sidens navigasjonsmeny * / .sidenav høyde: 100%; / * 100% Full høyde * / bredde: 0; / * 0 bredde - endre dette med JavaScript * / posisjon: fast; / * Hold deg på plass * / z-indeks: 1; / * Hold deg på topp * / topp: 0; venstre: 0; bakgrunnsfarge: # 111; / * Black * / overflow-x: hidden; / * Deaktiver horisontal rulle * / polstring-topp: 60px; / * Plasser innhold 60px fra toppen * / overgang: 0.5s; / * 0,5 sekund overgangseffekt til lysbilde i sidenav * / / * Navigasjonsmenyen lenker * / .sidenav en polstring: 8px 8px 8px 32px; tekst-dekorasjon: ingen; skriftstørrelse: 25px; farge: # 818181; skjerm: blokk; overgang: 0.3s / * Når du musen over navigasjonskoblingene, endre farge * / .sidenav a: svever, .offcanvas a: fokus color: # f1f1f1; / * Plasser og stil lukkeknappen (øverst til høyre) * / .sidenav .closebtn posisjon: absolutt; topp: 0; høyre: 25px; skriftstørrelse: 36px; margin-venstre: 50px; / * Stiltsideinnhold - bruk dette hvis du vil skyve sideinnholdet til høyre når du åpner sidnavigasjonen * / #main transition: margin-left .5s; polstring: 20px; flow: hidden; bredde: 100%; kropp overflow-x: hidden; / * Legg til en svart bakgrunnsfarge til toppnavigasjonen * / .topnav bakgrunnsfarge: # 333; overløp: skjult; / * Stil koblingene inne i navigasjonslinjen * / .topnav en float: left; skjerm: blokk; farge: # f2f2f2; tekst-align: center; polstring: 14px 16px; tekst-dekorasjon: ingen; skriftstørrelse: 17px; / * Endre fargene på koblinger på hover * / .topnav a: svever bakgrunnsfarge: #ddd; farge svart; / * Legg til en farge på den aktive / nåværende lenken * / .topnav a.active bakgrunnsfarge: # 4CAF50; farge: hvit; / * På mindre skjermer, hvor høyden er mindre enn 450px, endre stilen til sidenavet (mindre polstring og en mindre skriftstørrelse) * / @media skjerm og (maks høyde: 450px) .sidenav polstring: 15px; .siden av en font-size: 18px; en svg overgang: alle .5s enkelhet; &: svever #transform: roter (180deg); #ico display: none; .menu bakgrunn: # 000; skjerm: ingen; polstring: 5px; bredde: 320px; @include border-radius (5px); #transisjon: alle 0,5 s enkle; en display: block; farge: #fff; tekst-align: center; polstring: 10px 2px; margin: 3px 0; tekst-dekorasjon: ingen; bakgrunn: # 444; & nth-barn (1) margin-top: 0; @include border-radius (3px 3px 0 0); &: nth-barn (5) margin-bunn: 0; @include border-radius (0 0 3px 3px); &: svever bakgrunn: # 555;
Merk: Den kropp overflow-x: hidden; er nødvendig for å sikre at en horisontal rulle ikke vises når du bruker dette med ditt eksisterende CSS.
Du kan nå se på menyen din og prøve den i nettleseren din.
Hvis du vil opprette sidemenyen JavaScript ved hjelp av jQuery, kan du gjøre dette ved å erstatte JavaScript jeg ga tidligere med følgende avsnitt:
Accentsconagua
$ ('. topnav a'). klikk (funksjon () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). klikk (funksjon () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);For å få menyen til å vises uten lysbilde animasjon, gjør du bare endringer i CSS-egenskapen overgang, som vist i forkortet form nedenfor:
.Sidenav Overgang: 0s; #main overgang: margin-left 0s;
Dette gjør at endringen vises øyeblikkelig, da det ikke er noen forsinkelse angitt i overgang. Standarden vi brukte er 0.5s.
Å lage en sidemeny tar bare noen få linjer med kode og trenger ikke å bruke mye ressurser. Også, hvis jQuery allerede er på siden for andre oppgaver, kan jobben gjøres med litt færre kodelinjer og tilpasses videre.
Å gjøre koden lydhør for å jobbe med forskjellige skjermoppløsninger på enhetsenhet er bare et tilfelle av å endre CSS ved å legge til medieforespørsler for de konkrete tilfellene.
For å ta dette videre, kan du ønske å stil din meny med et CSS-rammeverk som Bootstrap eller Bulma.
