Opret en slide-out menu

Sep 13, 2025

hvordan

En fantastisk måde at forbedre brugererfaring på dit websted er at tilføje en slide-out menu; Det skaber en iøjnefaldende måde for brugerne at finde, hvad de vil have - hvor de end måtte være på siden - og betyder, at de ikke behøver at rulle op til den øverste NAV.

Vi elsker især slide-out-menuen på webstedet for Ice Cream Parlor Cosmetics , designet af Hiroka Hasegawa. (Hvis du ser websteder, du kan lide, skal du sørge for at redde dem i Sky lagring til inspiration). Læs videre for at finde ud af, hvordan du replikerer denne slide-out-effekt på din egen hjemmeside. Keen at oprette en hjemmeside, der giver et indtryk? Det rigtige Web Hosting. service OR. Website Builder. vil gøre netop det.

01. Dokumentinitiering

Det første skridt er at definere sidedokumentet. Dette består af en HTML-beholder, der repræsenterer websiden, som indeholder hoved- og kropsdelen. Mens hovedafsnittet bruges til at indlæse de eksterne CSS- og JavaScript-ressourcer, bruges kroppsektionen til at gemme det synlige sideindhold, der er oprettet i trin nr. 2.

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; hoved & gt;
& lt; titel & gt; Skub ud menu & lt; / titel & gt;
& lt; link rel = "stylesheet" type = "tekst / css" media = "skærm" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / Head & GT;
& lt; body & gt;
*** trin 2 her
& lt; / body & gt;
& lt; / HTML & GT;

02. Sideindhold

Sideindholdet består af en overskrifts titel sammen med en navigationsbeholder. Denne navigation gemmer en række links og er blevet tildelt en 'Data-Action' -attribut. Det er denne egenskab, der vil blive brugt af JavaScript og CSS til at anvende styling og funktionalitet til beholderen og dens elementer.

 & lt; h1 & gt; skub ud menu & lt; / h1 & gt;
& lt; nav Data-action = "Expand" & GT;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; en href = "#" & gt; side 1 & lt; / a & gt;
  & lt; en href = "#" & gt; side 2 & lt; / a & gt;
  & lt; en href = "#" & gt; side 3 & lt; / a & gt;
& lt; / NAV & GT;

03. CSS initiering

HTML'en er nu færdig, så opret en ny fil kaldet 'Styles.css' for at starte præsentationsformateringen. Dette trin indstiller HTML-dokumentet og dets krop til at have ingen synlig grænseafstand, sammen med en sort baggrund. Farve er indstillet til hvid som standardfarve for indholdstekst til arve.

 HTML, krop {
  Display: Blok;
  Bredde: 100%;
  Højde: 100%;
  Baggrund: # 000;
  Farve: #fff; }

04. NAVIGATION SETUP.

Navigationen skal vises med fast positionering og med et Z-indeks over alt, så det kan synes at dække den fulde skærm, uanset hvor brugeren har rullet til. Det er oprindeligt placeret ude af lyset på venstre side af skærmens synlige visningsport. En overgangsregel anvendes til at animere eventuelle ændringer over en varighed på et sekund.

 NAV {
  Display: Blok;
  Position: Fast;
  Boksestørrelse: Border-boks;
  TOP: 0;
  Venstre: -100VW;
  Z-indeks: 9999;
  Padding: .5em 1em .5em 1em ;;
  Bredde: 100VW;
  Højde: 100Vh;
  Tekst-Align: Center;
  Baggrund: Rød;
  Overgang: Alle 1s; }

05. NAV åben og ikon

Navigationens venstre position er indstillet til nul, når en 'åben' klasse er blevet anvendt, hvilket udløser den animerede overgang, der er defineret i det foregående trin. Navigationens første barn er det udvidede ikon, som bruger fast positionering til altid at forblive synligt i midten af venstre side af skærmen.

 NAV.OPEN {
  Venstre: 0;
}
NAV *: Første barn {
  Position: Fast;
  Padding: 1em;
  markør: pointer;
  Venstre: 0;
  TOP: 50VH;
  CLEAR: Begge; }

06. NAVIGATION LINKS.

Hvert ankerforbindelse inde i navigationsbeholderen er indstillet til at være fire gange størrelsen af standardteksten. Deres farve er sat til sort, med en margen på deres top for at sikre lodret afstand er synlig. Indstilling af deres skærm som 'Block' gør hvert link automatisk vist sig at blive stablet lodret.

 NAV A {
  Display: Blok;
  skriftstørrelse: 4EM;
  Farve: # 000;
  Font-Family: Arial;
  Tekst-dekoration: Ingen;
  Margin-top: .2EM;
}

07. Javascript listener.

Opret en ny fil kaldet 'CODE.JS'. Dette trin venter, indtil siden er indlæst, hvorpå den søger efter det første barn af alle navigeringer med 'Data-action' -attributtet, der er indstillet til 'Expand'. Dette første barn, der er det åbne ikon, har en 'klik' event lytter, der skifter, hvorefter elementet skal have eller ikke have en "åben" klassen påført.

 Window.AddeventListener ("Load", funktion () {
  VAR NODES = DOCUMENT.QUERYSELECTORALL ('NAV [DATA-ACTION = "Expand"] *: First-Child');
  for (var I = 0; I & lt; nodes.længde; i ++) {
  noder [i].AddeventListener ("klik", funktion () {
  hvis (this.parentnode.classname == "åben") this.parentnode.classname = "";
  ellers this.parentnode.classname = "åben";
  });
  }
});
***

Denne artikel blev oprindeligt offentliggjort i udstedelse 274 af Creative Web Design Magazine Web Designer. Køb problem 274 her eller Abonner på Web Designer her .

Relaterede artikler:

Top Web Navigation Trends
10 regler for stor brugeroplevelse
Tilføj Visual Cues til dit websted

Opret en slide-out menu

01. Dokumentinitiering

02. Sideindhold

03. CSS initiering

04. NAVIGATION SETUP.

05. NAV åben og ikon

06. NAVIGATION LINKS.

07. Javascript listener.

hvordan - Mest populære artikler

Sådan bruger du tyngdekraftskitse

Sådan oprettes en tegneserie

Opret et lydhørt layout med CSS-gitter

Sådan designes isometrisk typografi

10 Golden Rules for Responsive SVGS

Sådan designer man en animeret helt

Sådan bruges stockfotografering kreativt inden for dit designarbejde

Prototype En flydende handlingsknap i pixat

Kategorier