Vytvoření menu Slide-out

Sep 12, 2025

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

Vytvoření menu Slide-out

01. Zahájení dokumentu

02. Obsah stránky

03. Zahájení CSS.

04. Nastavení navigace

05. Nav otevřená a ikona

06. Navigační odkazy

07. JavaScript posluchač

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

Vytvořte si vlastní stylus s pouze 4 předměty pro domácnost (vážně)

Jak nakreslit svaly

Jak odstranit vrásky ve Photoshopu

Jak implementovat světelné nebo tmavé režimy v CSS

Jak začít s strypscriptem

Jak vytvořit vlastní plátno desky

Vytvořit kvalitní digitální kopie vašeho umění

Jak nakreslit Harley Quinn

Kategorie