Skapa en bildmeny

Sep 11, 2025

Hur

Ett bra sätt att förbättra användarupplevelse På din webbplats är du att lägga till en bildmeny; Det skapar ett iögonfallande sätt för användarna att hitta vad de vill ha - var de än befinner sig på sidan - och betyder att de inte behöver rulla tillbaka till toppen Nav.

Vi älskar särskilt utskjutningsmenyn på platsen för Ice Cream Parlor Cosmetics , designad av Hiroka Hasegawa (Om du ser webbplatser du gillar, var noga med att spara dem molnlagring för inspiration). Läs vidare för att ta reda på hur du replikerar den här utgåvan på din egen webbplats. Keen att skapa en webbplats som gör ett intryck? Den rätta webbhotell service eller Website Builder kommer att göra just det.

01. Dokumentinitiering

Det första steget är att definiera siddokumentet. Detta består av en HTML-behållare som representerar webbsidan, som innehåller huvudet och kroppsdelen. Medan huvudsektionen används för att ladda de externa CSS- och Javascript-resurserna används kroppsdelen för att lagra det synliga sidinnehållet som skapats i steg # 2.

 & lt;! Doktype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& lt; Titel & GT; Slide Out Menu & LT; / Titel & GT;
& lt; länk rel = "stylesheet" -typ = "Text / css" media = "skärm" href = "stilar.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& LT; / Head & GT;
& lt; kropp & gt;
*** Steg 2 här
& LT; / Body & GT;
& lt; / html & gt;

02. Sidinnehåll

Sidinnehållet består av en rubrik titel tillsammans med en navigeringsbehållare. Denna navigering lagrar en serie länkar och har tilldelats en "data-action" -attribut. Det är detta attribut som kommer att användas av JavaScript och CSS för att tillämpa styling och funktionalitet till behållaren och dess element.

 & lt; H1 & GT; Slide Out Menu & LT; / H1 & GT;
& lt; nav data-action = "Expand" & GT;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; en href = "#" & gt; sidan 1 & lt; / a & gt;
  & lt; en href = "#" & gt; sidan 2 & lt; / a & gt;
  & lt; en href = "#" & gt; sidan 3 & lt; / a & gt;
& lt; / nav & gt;

03. CSS-initiering

HTML är nu klar, så skapa en ny fil som heter 'Styles.css' för att initiera presentationsformateringen. Detta steg ställer in HTML-dokumentet och dess kropp att inte ha någon synlig gränsavstånd, tillsammans med en svart bakgrund. Färgen är inställd på White som standardfärg för innehållstext för att ärva.

 HTML, BODY {
  Visa: Block;
  Bredd: 100%;
  Höjd: 100%;
  Bakgrund: # 000;
  Färg: #fff; }

04. Navigationsinställningar

Navigeringen är att visa med fast positionering och med ett Z-index ovanför allt så att det kan tyckas täcka hela skärmen oavsett var användaren har rullat till. Det är ursprungligen placerat ur syn på vänster sida av skärmens synliga visningsport. En övergångsregel appliceras för att animera eventuella förändringar under en sekunds varaktighet.

 Nav {
  Visa: Block;
  Position: Fast;
  Box-dimensionering: Border-box;
  Topp: 0;
  Vänster: -100VW;
  Z-Index: 9999;
  Padding: .5EM 1EM .5EM 1EM ;;
  Bredd: 100vw;
  Höjd: 100VH;
  Text-Justera: Center;
  Bakgrund: röd;
  Övergång: Alla 1s; }

05. Nav öppen och ikon

Navigeringens vänstra position är inställd på noll när en "öppen" -klass har applicerats, vilket utlöser den animerade övergången som definieras i föregående steg. Navigeringens första barn är Expand-ikonen, som använder fast positionering för att alltid vara synlig i mitten av skärmens vänstra sida.

 NAV.Open {
  Vänster: 0;
}
Nav *: Första-barn {
  Position: Fast;
  Padding: 1EM;
  markör: pekare;
  Vänster: 0;
  Topp: 50VH;
  klart: båda; }

06. Navigeringslänkar

Varje ankarlänk inuti navigeringsbehållaren är inställd på att vara fyra gånger storleken på standardtexten. Deras färg är inställd på svart, med en marginal som appliceras på toppen för att garantera vertikalt avstånd är synlig. Ställa in displayen som "block" gör varje länk automatiskt att staplas vertikalt.

 nav a {
  Visa: Block;
  FONT-STORLEK: 4EM;
  Färg: # 000;
  Font-familj: Arial;
  Textdekoration: Ingen;
  Marginal-Top: .2
}

07. Javascript lyssnare

Skapa en ny fil som heter 'code.js'. Detta steg väntar tills sidan har laddats, på vilken den söker efter det första barnet av alla navigeringar med attributet "Data-action" som är inställd på "Expand". Detta första barn, som är den öppna ikonen, har en "klick" -händelselärare som applicerats, som växlar elementet som har eller inte har en "öppen" -klass som tillämpas.

 Window.Addeventlistener ("ladda", funktion () {
  var nodes = document.queryselectorall ('nav [data-action = "expand"] *: första barnet');
  för (var i = 0; i & lt; nodes.length; i ++) {
  noder [jag].addeventlistener ("klicka", funktion () {
  Om (this.parentnode.className == "öppen") this.parentnode.className = "";
  annars detta.parentnode.className = "öppen";
  });
  }
});
***

Denna artikel publicerades ursprungligen i utgåva 274 av kreativ webbdesignmagasin webbdesigner. Köp nummer 274 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

Topp webbnavigeringstrender
10 Regler för bra användarupplevelse
Lägg till visuella signaler till din webbplats

Skapa en bildmeny

01. Dokumentinitiering

02. Sidinnehåll

03. CSS-initiering

04. Navigationsinställningar

05. Nav öppen och ikon

06. Navigeringslänkar

07. Javascript lyssnare

Hur - Mest populära artiklar

Bygg prototyper med Adobe XD

Använd WordPress som en huvudlös CMS

Kom igång med rost

Hur man använder Adobe Capture CC

Hur man lägger till textur till dina pasteller med primers

Skapa en digital etch en skiss

Skärpa dina skissförmåga

Master User Experience Strategy

Kategorier