Hozzon létre egy Slide-out menüt

Feb 2, 2026

kézikönyv

Nagyszerű módja annak, hogy javítsa a felhasználói tapasztalat A webhelyén egy csúszós menü hozzáadása; Ez egy szemet gyönyörködtető módon hozhatja létre a felhasználók számára, hogy megtalálják, amit akarnak - bárhol is lehetnek az oldalon - és azt jelenti, hogy nem kell görgetniük a felső NAV-hez.

Különösen szeretjük a helyszíni kioldó menüt Fagylalt szalon kozmetikumok , tervezte Hiroka Hasegawa (Ha látja a webhelyeket, akkor győződjön meg róla, hogy megmenti őket felhő tároló inspirációért). Olvassa el, hogy megtudja, hogyan lehet megismételni ezt a csúsztatható hatását a saját weboldalára. Hogy hozzon létre egy webhelyet, amely benyomást kelt? A jobb web hosting szolgáltatás vagy weboldal építője ezt fogja tenni.

01. Dokumentumindítás

Az első lépés az oldal dokumentumának meghatározása. Ez egy HTML tartályból áll, amely a weboldalt ábrázolja, amely a fej- és testrészt tartalmazza. Míg a fejrész a külső CSS és JavaScript erőforrások betöltésére szolgál, a testrész a 2. lépésben létrehozott látható oldaltartalom tárolására szolgál.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; Cím & gt; csúsztassa ki a menüt & lt; / title & gt;
& link rel = "stylesheet" type = "szöveg / css" média = "képernyő" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; test & gt;
*** 2. lépés
& lt; / test & gt;
& lt; / html & gt;

02. oldal tartalom

Az oldal tartalma egy címsorból áll, valamint navigációs tartályt. Ez a navigáció számos linket tárol, és egy "adat-művelet" attribútumot rendel hozzá. Ez az attribútum, amelyet a JavaScript és a CSS használ, hogy alkalmazza a stílust és a funkcionalitást a tartályhoz és elemeihez.

 & lt; h1 & gt; csúsztassa ki a menüt & lt; / h1 & gt;
& Lt; Nav Data-Action = "Expand" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; egy href = "#" & gt; Page 1 & lt; / a & gt;
  & lt; egy href = "#" & gt; Page 2 & lt; / a & gt;
  & lt; egy href = "#" & gt; Page 3 & lt; / a & gt;
& lt; / nav & gt;

03. CSS-kezdeményezés

A HTML most befejeződött, így hozzon létre egy új fájlt, amelyet "Styles.css" neveznek a prezentációs formázás kezdeményezéséhez. Ez a lépés beállítja a HTML-dokumentumot és testét, hogy ne legyen látható határfelület, fekete háttér mellett. A szín fehérre van állítva, mint az alapértelmezett szín a tartalomszöveghez az örökléshez.

 HTML, test {
  Kijelző: blokk;
  Szélesség: 100%;
  Magasság: 100%;
  Háttér: # 000;
  Szín: #FFF; }

04. Navigációs beállítás

A navigáció rögzített pozícionálással és z-indexgel jelenik meg, így úgy tűnik, hogy a teljes képernyőt lefedi, függetlenül attól, hogy a felhasználó görgett. Kezdetben a képernyő látható nézetablakának bal oldalán kívül helyezkedik el. Átmeneti szabályt alkalmaznak a változások egy másodperces időtartam alatt történő animálására.

 NAV {
  Kijelző: blokk;
  Pozíció: fix;
  Box-méretezés: Border-Box;
  Top: 0;
  balra: -100VW;
  Z-index: 9999;
  Padding: .5em 1em .5em 1em ;;
  Szélesség: 100VW;
  Magasság: 100VH;
  Text-Align: Center;
  Háttér: piros;
  Átmenet: mind az 1S; }

05. NAV nyitott és ikon

A navigációs bal helyzete nullára van állítva, ha egy "nyitott" osztályt alkalmazunk, kiváltva az előző lépésben meghatározott animációs átmenetet. A navigáció első gyermeke a kibontás ikon, amely rögzített pozícionálást használ, hogy mindig látható maradjon a képernyő bal oldalán.

 Nav.open {
  Bal: 0;
}
NAV *: első gyermek {
  Pozíció: fix;
  Padding: 1em;
  kurzor: mutató;
  Bal: 0;
  Top: 50VH;
  Tiszta: mindkettő; }

06. Navigációs linkek

A navigációs konténer belsejében minden horgonyhivatkozás az alapértelmezett szöveg méretének négyszeresére van beállítva. Színük feketere van állítva, a tetején lévő margó pedig a függőleges távolság garantálása látható. A kijelzőn "blokk" beállítások szerint minden egyes link automatikusan úgy tűnik, hogy függőlegesen halmozódik fel.

 NAV A {
  Kijelző: blokk;
  betűméret: 4em;
  Szín: # 000;
  Font-Család: Arial;
  Szöveges dekoráció: nincs;
  Margin-Top: .2em;
}

07. JavaScript-hallgató

Hozzon létre egy "kód.js" nevű új fájlt. Ez a lépés, amíg az oldal betöltötte, amelyen az összes navigáció első gyermekét keresi az "Data-Action" attribútummal, amely "bővít". Ez az első gyermek, a nyitott ikon, a "kattintás" esemény hallgatója van, amelyen átkapcsolja az elemet, hogy "nyitott" osztály legyen.

 ablak.addeventlistener ("terhelés", funkció () {
  varoomes = Document.QuerySelectorall ('NAV [DATACE ACTION = "bontás"] *: első gyermek ");
  a (var i = 0; i & lt; nodes.lengnth, i ++) {
  csomópontok [i].addeventlistener ("kattintás", funkció () {
  ha (ez.parentnode.classname == "nyitott") this.parentnode.classname = "";
  egyébként ez.parentnode.classnév = "nyitott";
  });
  }
});
***

Ez a cikkeredetileg megjelenta szóban forgó274kreatívwebdesign magazinWeb Designer. Vásároljon 274 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

Legjobb web navigációs trendek
10 A nagyfelhasználói élmény szabályai
Visual Cues hozzáadása webhelyére

Hozzon létre egy Slide-out menüt

01. Dokumentumindítás

02. oldal tartalom

03. CSS-kezdeményezés

04. Navigációs beállítás

05. NAV nyitott és ikon

06. Navigációs linkek

07. JavaScript-hallgató

kézikönyv - Most Popular Articles

Kezdje az Artrage-t

10 módja a jobb 3D-s világ környezetének megteremtésére

Használja a WordPress fej nélküli CMS-t

Három lépés egy pezsgő éjszakai égbolt az akvarellben

Hogyan keverjük össze a Gouache palettát

Hogyan prototípi egy mobilalkalmazást az Adobe XD-vel

Master Felhasználói tapasztalatstratégia

Boost D3.js diagramok SVG gradiensekkel

Kategóriák