Skapa en bildmeny

Jan 30, 2026

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

Hur man förenklar blandningsformen i Maya

Bygg terräng i Houdini 17

Skapa en wobbly texteffekt med javascript

Rita en figur på under fem minuter

Hemligheterna att uppfylla en kreativ design kort

Hur får man mer från digitala texturer

Snabba upp din 3D-modellering

15 Tips för optimering av tvärenhet

Kategorier