Creați un meniu de diapozitive

Sep 11, 2025

să

O modalitate excelentă de a îmbunătăți experiența utilizatorului pe site-ul dvs. este de a adăuga un meniu de diapozitive; Creează un mod atrăgător pentru ca utilizatorii să găsească ceea ce doresc - oriunde ar putea fi pe pagină - și înseamnă că nu trebuie să deruleze înapoi la Top Nav.

Vom iubi în mod deosebit meniul de diapozitive de pe site pentru Cosmetica salonului de înghețată , proiectat de Hiroka Hasegawa. (Dacă vedeți site-uri care vă plac, asigurați-vă că le salvați Stocare in cloud pentru inspirație). Citiți mai departe pentru a afla cum să replicați acest efect de diapozitive pe propriul dvs. site web. Dorința de a crea un site web care face o impresie? Dreapta web hosting serviciu sau Builder de site-uri web va face doar asta.

01. Inițierea documentelor

Primul pas este definirea documentului de pagină. Aceasta constă dintr-un container HTML care reprezintă pagina web, care conține secțiunea capului și corpului. În timp ce secțiunea capului este utilizată pentru a încărca resursele CSS și JavaScript extern, secțiunea corpului este utilizată pentru a stoca conținutul vizibil al paginii create în pasul # 2.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; titlu & gt; Glisați meniul Meniu & Lt; / titlu & gt;
& Link Rel = "Stylesheet" Type = "Text / CSS" Media = "Ecranul" HREF = "STYLES.CSS" / & GT;
& lt; script src = "code.js" & gt; / lt; / script & gt;
& lt; / head & gt;
& lt; corp & gt;
*** Pasul 2 aici
& lt; / corp & gt;
& lt; / html & gt;

02. Conținutul paginii.

Conținutul paginii constă dintr-un titlu de poziție, împreună cu un container de navigație. Această navigație stochează o serie de linkuri și a fost atribuită un atribut "de acțiune". Este acest atribut care va fi utilizat de JavaScript și CSS pentru a aplica stilul și funcționalitatea containerului și a elementelor sale.

 & h1 & gt; Glisați meniul și Lt; / H1 & GT;
& lt; nav date-action = "extinde" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; un href = "#" & gt; / lt; / a & gt;
  & lt; un href = "#" & gt; / lt; / a & gt;
  & lt; un href = "#" & gt; / lt; / a & gt;
& lt; / nav & gt;

03. Inițierea CSS

HTML este acum complet, deci creați un fișier nou numit "stiluri.css" pentru a iniția formatul de prezentare. Acest pas stabilește documentul HTML și corpul său pentru a nu avea o distanțare vizibilă a frontierelor, împreună cu un fundal negru. Culoarea este setată la alb ca culoarea implicită pentru textul de conținut pentru a moșteni.

 HTML, corpul {
  Afișaj: bloc;
  Lățime: 100%;
  Înălțime: 100%;
  Context: # 000;
  Culoare: #ffff; }

04. Configurarea navigației

Navigarea este de afișare cu poziționare fixă și cu un indice Z de mai sus, astfel încât să poată par să acopere ecranul complet, indiferent de locul în care utilizatorul a derulat. Este inițial poziționată în vedere în partea stângă a ferestrei vizibile a ecranului. Se aplică o regulă de tranziție pentru a anima orice modificări pe o durată de o secundă.

 nav {
  Afișaj: bloc;
  Poziție: fixă;
  Dimensionarea casetei: Border-cutie;
  Top: 0;
  stânga: -100VW;
  Z-Index: 9999;
  Padding: .5Em 1Em .5EM 1EM;
  Lățime: 100VW;
  Înălțime: 100VH;
  Text-align: centru;
  fundal: roșu;
  Tranziție: Toate 1; }

05. nav deschis și pictograma

Poziția stângă a navigației este setată la zero când a fost aplicată o clasă "deschisă", declanșând tranziția animată definită în etapa anterioară. Primul copil al navigației este pictograma Expand, care utilizează poziționarea fixă pentru a rămâne întotdeauna vizibilă în centrul stângii al ecranului.

 NAV.OPEN {
  stânga: 0;
}
NAV *: Primul copil {
  Poziție: fixă;
  padding: 1em;
  Cursor: pointer;
  stânga: 0;
  Top: 50VH;
  clar: ambele; }

06. Link-uri de navigare

Fiecare link de ancorare din interiorul containerului de navigare este setat să fie de patru ori mai mare decât dimensiunea textului implicit. Culoarea lor este setată la negru, cu o marjă aplicată la partea de sus pentru a garanta că spațierea verticală este vizibilă. Setarea afișajului ca "bloc" face ca fiecare legătură să pară automat să fie stivuită vertical.

 NAV A {
  Afișaj: bloc;
  Font-dimensiune: 4EM;
  Culoare: # 000;
  Font-Family: Arial;
  Text-decorare: Nici unul;
  Margin-top: .2em;
}

07. ascultătorul JavaScript

Creați un fișier nou numit "Code.js". Acest pas așteaptă până când pagina sa încărcat, pe care îl caută primul copil al tuturor navigațiilor cu atributul "Data-action" setat la "Expand". Acest prim copil, fiind pictograma deschisă, are un ascultător de evenimente "faceți clic pe", pe care se modifică elementul să aibă sau să nu aibă o clasa "deschisă" aplicată.

 fereastră.AdDeventlistener ("încărcare", funcția () {
  Var Nodes = Document.QuerySelectorall ("NAV [Data-Action =" Expand "] *: Primul copil");
  pentru (var i = 0; i & lt; noduri.Length; i ++) {
  Noduri [i].Addeventlistener ("clic", funcția () {
  dacă (acest.parentNode.classname == "deschis") the.parentNode.classname = "";
  altceva the.parentNode.classname = "Deschis";
  });
  }
});
***

Acest articol a fost publicat inițial în numărul 274 al revistei Creative Web Design Designer Web. Cumpărați problema 274 aici sau Aboneaza-te la designerul web aici .

Articole similare:

Tendințele de navigare de top
10 reguli de experiență excelentă a utilizatorului
Adăugați indicații vizuale pe site-ul dvs.

Creați un meniu de diapozitive

01. Inițierea documentelor

02. Conținutul paginii.

03. Inițierea CSS

04. Configurarea navigației

05. nav deschis și pictograma

06. Link-uri de navigare

07. ascultătorul JavaScript

să - Cele mai populare articole

Este Apple Icloud Storage Full? Iată cum să eliberați spațiu

Începeți cu pictor de flacără

Recree un clasic manga

Creați nori cu FUMEFX pentru 3DS MAX

Adăugați animații ui pe site-ul dvs.

19 sfaturi pentru marile poseri

Cum de a picta o scenă de pădure fantezie de vis

Cum să pictați un portret atmosferic în Photoshop

Categorii