Creați un meniu de diapozitive

Feb 4, 2026
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.

să - Cele mai populare articole

Cum să întoarceți ziua în noapte în Photoshop

să Feb 4, 2026

Conversii de zi cu zi au fost în jur, atâta timp cât Photoshop a avut straturi de ajustare, dar stăpânirea efectului ia o mu..

Cum să scanați o persoană în mai puțin de cinci minute

să Feb 4, 2026

Nu aveți acces la o matrice de fotografiat fotogrammetrie pentru a efectua o Scanare 3D. ? Nici o problemă, aces..

5 sfaturi pentru Super-Fast CSS

să Feb 4, 2026

Te-ai gândit la dimensiunea CSS a site-ului tău? Dacă foaia de stil este balonantă, ar putea întârzia redarea paginilor. ..

Cum se creează o aplicație de bord cu reacția

să Feb 4, 2026

Pagina 1 din 2: Efectuați o aplicație de bord în reacția - pașii 1-10 ..

Efecte de tipografie 3D interactive

să Feb 4, 2026

Tipografia a jucat întotdeauna o parte importantă în arsenalul instrumentelor designer, deoarece selectează tastarea potrivit..

Vopsea un portret de stil în Photoshop CC

să Feb 4, 2026

Ca parte a lui Comorile ascunse ale creativității Proiectul, Adobe a transformat pensule vechi de secole folosit..

Documentați sistemele de proiectare cu fractal

să Feb 4, 2026

Vă place să învățați mai multe despre sistemele de proiectare? Atunci nu ratați inginerul UI senior ..

Cum se creează părul 3D și blănurile

să Feb 4, 2026

Puteți fi cu ușurință copleșiți prima dată când lucrați cu blană în orice 3D Art. software. În acest t..

Categorii