Luo dia-out-valikko

Feb 2, 2026

Miten tehdään

Hyvä tapa parantaa käyttäjäkokemus Sivustosi on lisätä dia-valikko; Se luo silmiinpistävän tien, jolla käyttäjät voivat löytää, mitä he haluavat - missä he voivat olla sivulla - ja tarkoittaa, että heidän ei tarvitse selata alkuun alkuun.

Rakastamme erityisesti sivuston dia-out-valikkoa Jäätelöbaari kosmetiikka , suunnitellut Hiroka Hasegawa (Jos näet haluamasi sivustot, muista tallentaa ne sisään pilvivarasto inspiraatiota varten). Lue, että voit selvittää, miten tämä dia-out vaikutus omaan verkkosivustoosi. Kee luoda verkkosivusto, joka tekee vaikutelman? Oikea sivujen ylläpito palvelua tai Verkkosivuston rakentaja tekee juuri sen.

01. Asiakirjan aloittaminen

Ensimmäinen vaihe on määritellä sivuasiakirja. Tämä koostuu HTML-säiliöstä, joka edustaa verkkosivua, joka sisältää pää- ja runkoosan. Vaikka pääosaa käytetään ulkoisten CSS- ja JavaScript-resurssien lataamiseen, kehon osaa käytetään vaiheessa # 2 luotu näkyvän sivun sisällön tallentamiseen.

 & lt ;! DocType HTML & GT;
& lt; html & gt;
& lt; pää & gt;
& lt; otsikko & gt; liukui valikosta & lt; / otsikko & gt;
& lt; Link Rel = "Stylesheet" tyyppi = "Teksti / CSS" media = "näyttö" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Vaihe 2 Tässä
& lt; / body & gt;
& lt; / html & gt;

02. Sivun sisältö

Sivun sisältö koostuu otsikon otsikosta sekä navigointilasäiliöön. Tämä navigointi tallentaa sarjan linkkejä, ja se on määritetty "Data-Action" -määritykseksi. Tämä attribuutti, jota JavaScript ja CSS käyttävät säiliöön ja sen elementteihin säiliöön ja sen elementteihin.

 & lt; h1 & gt; liukuu valikko & lt; / h1 & gt;
& lt; nav data-action = "Laajenna" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; sivu 1 & lt; / a & gt;
  & lt; a href = "#" & gt; sivu 2 & lt; / a & gt;
  & lt; a href = "#" & gt; sivu 3 & lt; / a & gt;
& lt; / nav & gt;

03. CSS: n aloittaminen

HTML on nyt valmis, joten luo uusi tiedosto nimeltä "Styles.css" esittelyn muotoilun aloittamiseksi. Tämä vaihe asettaa HTML-dokumentin ja sen kehon, jolla ei ole näkyvää raja-etäisyyttä sekä mustalla taustalla. Väri asetetaan valkoiseksi kuin sisällön tekstin oletusväri periä.

 HTML, Body {
  Näyttö: Block;
  Leveys: 100%;
  Korkeus: 100%;
  Tausta: # 000;
  Väri: #FFF; }

04. Navigointiasetukset

Navigointi on tarkoitus näyttää kiinteällä paikannuksella ja Z-indeksellä kaiken yläpuolella, jotta se voi näyttää kattamaan koko näytön riippumatta siitä, missä käyttäjä on vieritetty. Se on aluksi sijoitettu näkymästä näytön näkyvän Viewportin vasemmalla puolella. Siirtyminen sääntöä sovelletaan animoimaan muutokset yhden sekunnin ajan.

 Nav {
  Näyttö: Block;
  Paikka: kiinteä;
  Box-Mitoitus: Border-Box;
  Top: 0;
  Vasen: -100vw;
  Z-indeksi: 9999;
  Padding: .5EM 1em .5EM 1EM ;;
  Leveys: 100vW;
  Korkeus: 100vh;
  Teksti-kohdistus: keskus;
  Taustaa: punainen;
  Siirtyminen: Kaikki 1S; }

05. Nav Open ja ICON

Navigointin vasemman asennon asetetaan nollaksi, kun "auki" -luokka on käytetty, edellisessä vaiheessa määritelty animoitu siirtymä. Navigointin ensimmäinen lapsi on laajeneva kuvake, joka käyttää kiinteää paikannusa aina näkyvissä näytön vasemmalla puolella.

 nav.open {
  Vasen: 0;
}
Nav *: Ensimmäinen lapsi {
  Paikka: kiinteä;
  Pehmuste: 1EM;
  kohdistin: osoitin;
  Vasen: 0;
  Top: 50vh;
  Tyhjennä molemmat; }

06. Navigointilinkit

Jokainen navigaattorin sisäpuolella oleva ankkuriyhteys on neljä kertaa oletusnäytön koko. Heidän värinsä on asetettu mustaksi, ja niiden yläosassa on marginaali, jotta pystysuuntainen etäisyys on näkyvissä. Näytön asettaminen "lohkona" tekee jokaisesta linkistä automaattisesti pinottavan pystysuoraan.

 nav a {
  Näyttö: Block;
  Fontti-koko: 4.EM;
  Väri: # 000;
  Fontti-perhe: Arial;
  Tekstisuunnittelu: Ei mitään;
  marginaali: .2em;
}

07. JavaScript kuuntelija

Luo uusi tiedosto nimeltä "code.js". Tämä vaihe odottaa, kunnes sivu on ladattu, johon se etsii kaikkien kaikkien navigointien ensimmäistä lapua, jossa on "Data-Action" -ominaisuus asetettu "laajenevaksi". Tämä ensimmäinen lapsi, joka on avoin kuvake, on "Click" tapahtuman kuuntelija, kun se vaihtaa elementin, jolla on "avoin" luokka.

 Window.AdDeventListener ("Load", Toiminto () {
  var solmut = document.queryelectectell ('NAV [Data-Action = "Expand"] *: First-Child');
  (var i = 0; i & lt; solmut.length; i ++) {
  Solmut [i].AddeventListener ("Click", Toiminto () {
  jos (tämä.parentnode.className == "auki") Tämä.Parentnode.className = "";
  Else this.parentnode.className = "auki";
  });
  }
});
***

Tämä artikkeli julkaistiin alun perin Banes 274 Creative Web Design Magazine Web Designer. Osta numero 274 täältä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

Top Web-navigointi trendit
10 Suurten käyttökokemusten sääntöjä
Lisää visuaalisia vihjeitä sivustoosi

Luo dia-out-valikko

01. Asiakirjan aloittaminen

02. Sivun sisältö

03. CSS: n aloittaminen

04. Navigointiasetukset

05. Nav Open ja ICON

06. Navigointilinkit

07. JavaScript kuuntelija

Miten tehdään - Suosituimmat artikkelit

Tee oma kynä vain 4 kotitalouskohteella (vakavasti)

Miten lisätä energiaa elämäsi piirustuksiin

Tutki tietojen visualisointia P5.JS: n kanssa

Miten vaihtaa fonttia Twitter Bio

Nestemäisten vaikutusten luominen WebGL: llä

4 Vinkkejä sivun suorituskyvyn parantamiseen

Kasvata kasvia Houdini

Harley Quinn

Luokat