Maak een uitschuifmenu

Sep 13, 2025

Procedures

Een geweldige manier om de gebruikerservaring Op uw site is om een uitschuifmenu toe te voegen; Het creëert een opvallende manier voor gebruikers om te vinden wat ze willen - waar ze zich ook op de pagina bevinden - en betekent dat ze niet terug moeten scrollen naar de bovenste NAV.

We houden vooral van het schuifmenu op de site voor IJssalon cosmetica , ontworpen door Hiroka Hasegawa (Als je sites ziet, zorg er dan voor dat je ze opslaat cloud opslag voor inspiratie). Lees verder om erachter te komen hoe u dit uitschuifrecht op uw eigen website kunt repliceren. Wilt u een website maken die een indruk maakt? Het recht web hosting service of website bouwer zal precies dat doen.

01. Documentinitiatie

De eerste stap is om het pagina-document te definiëren. Dit bestaat uit een HTML-container die de webpagina vertegenwoordigt, die het hoofd- en lichaamsectie bevat. Terwijl het hoofdgedeelte wordt gebruikt om de externe CSS- en JavaScript-bronnen te laden, wordt het gedeelte Body gebruikt om de inhoud van het zichtbare pagina op te slaan die in stap # 2 zijn gemaakt.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& LT; TITLE & GT; SLIM OUT MENU & LT; / TITLE & GT;
& LT; LINK REL = "STYLESHEET" TYPE = "Tekst / CSS" MEDIA = "SCHERM" HREF = "STYLES.CSSS" / GT;
& lt; script SRC = "Code.js" & GT; & LT; / Script & GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
*** Stap 2 hier
& LT; / BODY & GT;
& LT; / HTML & GT;

02. Pagina-inhoud

De pagina-inhoud bestaat uit een koptitel, samen met een navigatiecontainer. Deze navigatie slaat een reeks links op en is toegewezen aan een 'data-actie' kenmerk. Het is dit attribuut dat wordt gebruikt door het JavaScript en CSS om styling en functionaliteit toe te passen op de container en de elementen ervan.

 & LT; H1 & GT; Schuif menu & LT; / H1 & GT;
& LT; NAV-gegevens-actie = "Expand" & GT;
  & LT; SPAN & GT; & AMP; # 9776; & LT; / SPAN & GT;
  & LT; A HREF = "#" & GT; Pagina 1 & LT; / A & GT;
  & lt; een href = "#" & GT; Pagina 2 & LT; / A & GT;
  & LT; A HREF = "#" & GT; Pagina 3 & LT; / A & GT;
& LT; / NAV & GT;

03. CSS-initiatie

De HTML is nu voltooid, dus maak een nieuw bestand met de naam 'Styles.css' om de presentatie-formattering te initiëren. Deze stap zet het HTML-document en zijn lichaam om geen zichtbare grensafstand te hebben, samen met een zwarte achtergrond. Kleur is ingesteld op wit als de standaardkleur voor inhoudstekst om te beperken.

 HTML, lichaam {
  Weergave: blok;
  Breedte: 100%;
  Hoogte: 100%;
  Achtergrond: # 000;
  Kleur: #fff; }

04. Navigatie-instellingen

De navigatie is om weer te geven met vaste positionering en met een Z-index boven alles, zodat het kan lijken op het volledige scherm, ongeacht waar de gebruiker naartoe heeft geschoven. Het is in eerste instantie uitzicht aan de linkerkant van het zichtbare viewport van het scherm. Een overgangsregel wordt toegepast om eventuele wijzigingen over een duur van één seconde te animeren.

 NAV {
  Weergave: blok;
  Positie: vastgesteld;
  Box-sizing: rand-box;
  Top: 0;
  links: -100vw;
  Z-index: 9999;
  Vulling: .5em 1em .5em 1em ;;
  Breedte: 100VW;
  Hoogte: 100VH;
  Tekst-Uitlijnen: Centrum;
  Achtergrond: rood;
  Transitie: alle 1s; }

05. NAV open en pictogram

De linkerpositie van de navigatie is ingesteld op nul wanneer een 'Open'-klasse is toegepast, de geanimeerde overgang die in de vorige stap is gedefinieerd. Het eerste kind van het navigatie is het pictogram Expand, dat vaste positionering gebruikt om altijd zichtbaar te blijven in het midden van de linkerkant van het scherm.

 Nav.open {
  Links: 0;

NAV *: First-Child {
  Positie: vastgesteld;
  Vulling: 1em;
  Cursor: wijzer;
  Links: 0;
  Top: 50VH;
  beiden opschonen; }

06. Navigatie-links

Elke ankerkoppeling in de navigatiecontainer is ingesteld op vier keer de grootte van de standaardtekst. Hun kleur is ingesteld op zwart, met een marge die aan hun top wordt aangebracht om de verticale afstand te garanderen is zichtbaar. Het instellen van hun weergave als 'blok' lijken elke link automatisch verticaal te worden gestapeld.

 NAV A {
  Weergave: blok;
  FONT-SIZE: 4EM;
  Kleur: # 000;
  Font-familie: Arial;
  tekst-decoratie: geen;
  Margin-top: .2em;
}

07. JavaScript Luisterer

Maak een nieuw bestand met de naam 'Code.js'. Deze stap wacht totdat de pagina heeft geladen, waarop het zoekt naar het eerste kind van alle navigaties met het kenmerk 'Action-actie' om 'Expand'. Dit eerste kind heeft het open pictogram, een 'klik' gebeurtenis-luisteraar toegepast, waarop het element omschakelt om een 'open'-klasse te hebben of niet te hebben.

 venster.AddevenListener ("load", functie () {
  VAR-knooppunten = document.QuerySelectectorAlle ('NAV [Data-Action = "Expand"] *: First-Child');
  voor (var i = 0; i & lt; knooppunten.lengte; i ++) {
  knooppunten [I].ADDEVENTLIDELENER ("klik", functie () {
  if (this.parentnode.classname == "open") deze.parentnode.classname = "";
  anders deze.parentnode.classname = "open";
  
  

***

Dit artikel is oorspronkelijk gepubliceerd in kwestie 274 van Creative Web Design Magazine Web Designer. Koop Probleem 274 hier of Abonneer u hier op Web Designer

Gerelateerde artikelen:

Top Web Navigatietrends
10 regels van grote gebruikerservaring
Voeg visuele aanwijzingen toe aan uw site

Maak een uitschuifmenu

01. Documentinitiatie

02. Pagina-inhoud

03. CSS-initiatie

04. Navigatie-instellingen

05. NAV open en pictogram

06. Navigatie-links

07. JavaScript Luisterer

Procedures - Meest populaire artikelen

Hoe u uw bril kunt stoppen die opdraagt bij het dragen van een gezichtsmasker

Gebruik hersenen om een neuraal netwerk te bouwen

SVG-filters toevoegen met CSS

Adobe Capture CC gebruiken

5 tips om uw VR-creaties te verbeteren

Hoe een zombie in Clip Studio-verf te schilderen

Hoe te schilderen overtuigende reflecties

Hoe u het juiste prototypingtool wilt kiezen

Categorieën