Lag en glidelåsemeny

Sep 13, 2025

hvordan

En fin måte å forbedre på Brukererfaring På nettstedet ditt er å legge til en glidelås-meny; Det skaper en iøynefallende måte for brukere å finne det de vil ha - uansett hvor de kan være på siden - og betyr at de ikke trenger å bla tilbake til toppnavet.

Vi elsker spesielt glidebryteren på stedet for [1. 3] Iskrem Parlor Kosmetikk

, designet av Hiroka Hasegawa. (Hvis du ser nettsteder du liker, må du sørge for å lagre dem i skylagring for inspirasjon). Les videre for å finne ut hvordan du kopierer denne lysbildeffekten på din egen nettside. Keen å skape et nettsted som gir et inntrykk? Den rette Web Hosting. service eller Nettstedbygger vil gjøre nettopp det.

01. Dokumentinitiasjon

Det første trinnet er å definere sidedokumentet. Dette består av en HTML-beholder som representerer nettsiden, som inneholder hodet og kroppsdelen. Mens hovedavsnittet brukes til å laste de eksterne CSS- og JavaScript-ressursene, brukes kroppsdelen til å lagre det synlige siden innholdet som er opprettet i trinn # 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Slide outmeny & lt; / title & gt;
& lt; link rel = "Stylesheet" type = "Tekst / css" media = "skjerm" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Trinn 2 her
& lt; / body & gt;
& lt; / html & gt;

02. Sideinnhold

Sidens innhold består av en overskriftstittel, sammen med en navigasjonsbeholder. Denne navigasjonen lagrer en serie lenker og har blitt tildelt en "data-handling" -attributt. Det er dette attributtet som vil bli brukt av JavaScript og CSS for å bruke styling og funksjonalitet til beholderen og dets elementer.

 & lt; h1 & gt; glide utmeny & lt; / h1 & gt;
& lt; nav data-action = "utvide" & gt;
  & lt; span & gt; & # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; side 1 & lt; / a & gt;
  & lt; a href = "#" & gt; side 2 & lt; / a & gt;
  & lt; a href = "#" & gt; Page 3 & lt; / a & gt;
& lt; / Nav & gt;

03. CSS-initiering

HTML er nå fullført, så opprett en ny fil kalt 'Styles.CSS' for å starte presentasjonsformateringen. Dette trinnet setter HTML-dokumentet og dets kropp for å ikke ha noen synlige grenseavstand, sammen med en svart bakgrunn. Farge er satt til hvit som standardfarge for innholdstekst for å arve.

 html, kropp {
  Skjerm: blokk;
  Bredde: 100%;
  Høyde: 100%;
  Bakgrunn: # 000;
  farge: #fff; }

04. Navigasjonsoppsett

Navigasjonen er å vise med fast posisjonering og med en Z-indeks over alt slik at det ser ut til å dekke hele skjermen, uavhengig av hvor brukeren har rullet til. Det er i utgangspunktet plassert ute av visningen på venstre side av skjermens synlige visningsport. En overgangsregel brukes for å animere eventuelle endringer over en varighet på ett sekund.

 NAV {
  Skjerm: blokk;
  posisjon: fast;
  Box-dimensjonering: Border-boks;
  Topp: 0;
  Venstre: -100vw;
  Z-Index: 9999;
  polstring: .5em 1em .5em 1em ;;
  Bredde: 100vw;
  Høyde: 100VH;
  Tekstjustering: Senter;
  Bakgrunn: Rød;
  Overgang: Alle 1s; }

05. Nav åpen og ikon

Navigasjons venstre posisjon er satt til null når en "åpen" -klasse har blitt brukt, utløser den animerte overgangen som er definert i forrige trinn. Navigasjonens første barn er utvidetikonet, som bruker fast posisjonering for alltid å forbli synlig i midten av venstre side av skjermen.

 Nav.Open {
  Venstre: 0;
}
NAV *: First-Child {
  posisjon: fast;
  polstring: 1em;
  Markør: Pointer;
  Venstre: 0;
  Topp: 50 VH;
  Klar: begge; }

06. Navigasjonsforbindelser

Hver ankerkobling inne i navigasjonsbeholderen er satt til å være fire ganger størrelsen på standardteksten. Fargen deres er satt til svart, med en margin som brukes på toppen for å garantere vertikalt avstand er synlig. Innstilling av displayet som "blokk" gjør at hver kobling automatisk ser ut til å bli stablet vertikalt.

 Nav a {
  Skjerm: blokk;
  FONT-STØRRELSE: 4EM;
  Farge: # 000;
  Font-familie: Arial;
  Tekst-dekorasjon: ingen;
  margin-top: .2EM;
}

07. JavaScript Listener

Opprett en ny fil kalt 'Code.js'. Dette trinnet venter til siden er lastet, hvor den søker etter det første barnet i alle navigasjoner med "Data-action" -attributtet som er satt til "Utvid". Dette første barnet, som er det åpne ikonet, har en "klikk" Event Listener påført, som skifter elementet til å ha eller ikke har en "åpen" -klasse påført.

 window.addeventlistener ("last", funksjon () {
  var noder = dokument.queSalgektorAll ('Nav [Data-Action = "Expand"] *: Første barn');
  for (var I = 0; i & lt; noder.length; i ++) {
  noder [i].Addeventlistener ("klikk", funksjon () {
  hvis (dette.parentnode.classname == "åpen") this.parentnode.classname = "";
  ellers this.parentnode.classname = "åpen";
  });
  }
});
***

Denne artikkelen ble opprinnelig publisert i utgave 274 av Creative Web Design Magazine webdesigner. Kjøp problem 274 her eller Abonner på webdesigner her .

Relaterte artikler:

Topp Web Navigation Trender
10 regler for stor brukeropplevelse
Legg til visuelle tegn på nettstedet ditt

Lag en glidelåsemeny

01. Dokumentinitiasjon

02. Sideinnhold

03. CSS-initiering

04. Navigasjonsoppsett

05. Nav åpen og ikon

06. Navigasjonsforbindelser

07. JavaScript Listener

hvordan - Mest populære artikler

6 Hurtige tips for å forbedre børstepennens tegning

Hvordan lage tilgjengelige webskjemaer

Lær å modellere en 3D-person i Zbrush og Maya

Design en spillbar avatar for et videospill

Hvordan blande en Gouache Palette

Hvordan designe brukervennlige mobilgrensesnitt

Hvordan lage hår i kino 4D

15 tips for optimalisering av kryssenhet

Kategorier