Vytvoření menu Slide-out

Jan 24, 2026
jak

Skvělý způsob, jak zlepšit uživatelská zkušenost Na vašich stránkách je přidat výklopné menu; To vytváří poutavý způsob, jak najít to, co chtějí - kdekoli mohou být na stránce - a znamená, že se nemusí posouvat zpět nahoru NAV.

Zvláště milujeme menu sacího out na stránkách Kosmetika , navrhl Hiroka Hasegawa. (Pokud vidíte stránky, které se vám líbí, ujistěte se, že je uložte cloudové úložiště pro inspiraci). Přečtěte si, abyste zjistili, jak replikovat tento vysouvací efekt na vlastní webové stránky. Keen vytvořit webovou stránku, která činí dojem? Právo web hosting služba OR. Webové stránky Builder. to udělá jen to.

01. Zahájení dokumentu

Prvním krokem je definovat dokument stránku. To se skládá z kontejneru HTML představující webovou stránku, která obsahuje sekci hlavy a těla. Zatímco sekce hlavy se používá k načtení externích CSS a prostředků JavaScript, sekce karoserie slouží k uložení obsahu viditelného stránku vytvořený v kroku # 2. 

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt, titul & gt; posuňte menu & lt; / titul & gt;
& lt, link rel = "Stylesheet" type = "text / css" média = "obrazovka" href = "styles.css" / & gt;
& lt; scénář src = "code.js" & gt; & lt; / script & gt;
& lt; / hlava & gt;
& lt; tělo & gt;
*** Krok 2 zde
& lt; / tělo & gt;
& lt; / html & gt;

02. Obsah stránky

Obsah stránky se skládá z názvu nadpisu spolu s navigačním kontejnerem. Tato navigace ukládá řadu odkazů a byla přiřazena atributu 'datová akce'. Je to tento atribut, který bude používán JavaScriptem a CSS aplikovat styling a funkčnost kontejneru a jeho prvků. 

 & lt; H1 & gt; Posuňte menu & lt; / h1 & gt;
& lt; Nav Data-Action = "Expand" & gt;
  & lt, span & gt; # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; Page 1 & lt; / a & gt;
  & lt; a href = "#" & gt; strana 2 & lt; / a & gt;
  & lt; a href = "#" & gt; Page 3 & lt; / A & gt;
& lt; / NAV & GT;

03. Zahájení CSS.

HTML je nyní dokončena, takže vytvořte nový soubor s názvem 'Styles.css' pro zahájení formátování prezentace. Tento krok nastavuje dokument HTML a jeho tělo, aby neměly žádné viditelné mezery pohraniční, spolu s černým pozadím. Barva je nastavena na bílou jako výchozí barvu pro obsah obsahu pro zdědičku. 

 HTML, tělo {
  Displej: blok;
  šířka: 100%;
  výška: 100%;
  Pozadí: # 000;
  Barva: #fff; }

04. Nastavení navigace

Navigace je zobrazena s pevným polohováním a s Z-indexem nad všem tak, aby se mohlo zdát, že pokrývají celou obrazovku bez ohledu na to, kde uživatel se posouvá. To je zpočátku umístěno z pohledu na levé straně viditelného výřezu obrazovky. Pravidlo přechodu je aplikováno na animaci všech změn po dobu jedné sekundy. 

 NAV {
  Displej: blok;
  Poloha: pevná;
  box-dimenzování: hraniční box;
  top: 0;
  vlevo: -100vw;
  Z-index: 9999;
  Polstrování: .5EM 1EM .5EM 1EM;
  šířka: 100vw;
  Výška: 100VH;
  Text-ALIGN: CENTER;
  pozadí: červená;
  Přechod: Všechny 1S; }

05. Nav otevřená a ikona

Levá pozice navigace je nastavena na nulu, když byla použita třída "Otevřít", spustí animovaný přechod definovaný v předchozím kroku. První dítě navigace je Ikona rozšíření, která používá pevné umístění pro vždy viditelné ve středu levé strany obrazovky. 

 NAV.OPEN {
  vlevo: 0;
}
NAV *: první dítě {
  Poloha: pevná;
  Polstrování: 1em;
  kurzor: ukazatel;
  vlevo: 0;
  top: 50vh;
  Jasno: oba; }

06. Navigační odkazy

Každý kotevní spojení uvnitř navigačního kontejneru je čtyřnásobek velikosti výchozího textu. Jejich barva je nastavena na černou, s marží aplikovanou na jejich vrcholu, aby byla viditelná vertikální vzdálenost. Nastavení jejich zobrazení jako "blok" činí každý odkaz automaticky naskládaný vertikálně. 

 NAV A {
  Displej: blok;
  Velikost písma: 4EM;
  Barva: # 000;
  Font-family: Arial;
  Textová dekorace: Žádný;
  Margin-top: .2EM;
}

07. JavaScript posluchač

Vytvořit nový soubor nazvaný 'Code.js'. Tento krok čeká, dokud nebude stránka načtena, načež se vyhledá prvního dítěte všech navigací s atributem 'Data-Action' 'Atribut nastavena na' Rozšíření '. Toto první dítě, je otevřená ikona, má uplatňovatel události kliknutí, na který přepíná prvek, který má nebo nemá použita "otevřená" třída. 

 window.addeventListener ("zatížení", funkce () {
  VAR uzlů = Document.QuerySelektorall ('NAV [Data-Action = "Rozbalit"] *: první dítě ");
  pro (var i = 0; i

Tento článek byl původně publikován v čísle 274 tvůrčího webového designu časopisu Web Designer. Prodám vydání 274 zde nebo Přihlásit se zde web designer zde .

Související články:

  • Top web navigační trendy
  • 10 Pravidla skvělých uživatelských zkušeností
  • Přidejte své stránky vizuální podněty

jak - Nejoblíbenější články

Jak používat Referenční snímky: 13 Základní tipy pro umělce

jak Jan 24, 2026

(Image Credit: Jonathan HolestRy) Strana 1 z 2: Strana 1 Stra..

Jak kódovat inteligentní textové efekty s CSS

jak Jan 24, 2026

[Image: Střední dítě] Odkazy převrácení jsou skvělým způsobem, jak chytit pozornost uživatele, zvláště ..

Malířský expresivní portrét umění s ARTRAGE 5

jak Jan 24, 2026

ARTRAGE je populární nástroj pro digitální umění (více, viz naše Artage. Úvod) V tomto tutoriálu vás v..

10 Tipy pro zvládnutí aplikace Apple App

jak Jan 24, 2026

Fotky aplikace MacOS začala život jako iPhoto: spotřebitelská aplikace pro správu digitálních fotografií, s několika zá..

Jak vytvořit aplikaci AR

jak Jan 24, 2026

Strana 1 z 3: Sestavte aplikaci AR: Kroky 01-10 Sestavte aplikaci AR: Kro..

Jak vytvořit animovaný typ psaní

jak Jan 24, 2026

Při použití dobře, CSS Animace může přidat zájem a osobnost na vaše stránky. V tomto článku půjdeme, jak vytvořit animovaný efekt, kter�..

Jak připojit kresbu

jak Jan 24, 2026

Dobře provedený držák je více než jen další Umělecká technika přidat k řemeni. Do své práce přidá ..

Sestavte si kartu UI s nadací

jak Jan 24, 2026

Karta Rozložení webových stránek převzali web. Vyrobeno Populární Pinterest, Twitter, Facebook a Google, ka..

Kategorie