Crea un menu Slide-out

Feb 4, 2026

Come si fa

Un ottimo modo per migliorare il esperienza utente sul tuo sito è aggiungere un menu a slup-out; Crea un modo accattivante per gli utenti di trovare ciò che vogliono - ovunque possano essere sulla pagina - e significa che non devono scorrere indietro fino al TOP NAV.

Amiamo particolarmente il menu slide-out sul sito per Cosmetici per gelateria , progettato da Hiroka Hasegawa. (Se vedi i siti che ti piace, assicurati di salvarli deposito cloud. per ispirazione). Continua a leggere per scoprire come replicare questo effetto slide-out sul tuo sito web. Keen per creare un sito Web che fa impressione? La destra web hosting servizio o Builder del sito web farò proprio questo.

01. Inizio del documento

Il primo passo è definire il documento della pagina. Ciò consiste in un contenitore HTML che rappresenta la pagina Web, che contiene la sezione della testa e del corpo. Mentre la sezione della testa viene utilizzata per caricare le risorse esterne CSS e JavaScript, la sezione del corpo viene utilizzata per memorizzare il contenuto della pagina visibile creato nel passaggio n. 2.

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; slide out menu & lt; / title & gt;
& lt; lt; link rel = "stylesheet" type = "testo / css" media = "schermata" href = "stili.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e GT;
*** Step 2 qui
& lt; / corpo e GT;
& lt; / html & gt;

02. Contenuto della pagina

Il contenuto della pagina è costituito da un titolo di intestazione, insieme a un contenitore di navigazione. Questa navigazione memorizza una serie di collegamenti e ha assegnato un attributo "Data-Action". È questo attributo che verrà utilizzato dal JavaScript e dal CSS per applicare lo styling e la funzionalità al contenitore e ai suoi elementi.

 & lt; H1 & GT; SFILARE MENU & LT; / H1 & GT;
& lt; nav data-action = "Expand" & gt;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; a href = "#" & gt; Pagina 1 & lt; / A & GT;
  & lt; un href = "#" & gt; Pagina 2 & lt; / A & GT;
  & lt; un href = "#" & gt; Pagina 3 & lt; / A & GT;
& lt; / nav & gt;

03. Iniziazione CSS.

L'HTML è ora completato, quindi crea un nuovo file chiamato 'stili.css' per avviare la formattazione della presentazione. Questo passaggio imposta il documento HTML e il suo corpo per non avere spaziatura di bordo visibile, insieme a uno sfondo nero. Il colore è impostato su bianco come colore predefinito per il testo del contenuto da ereditare.

 HTML, Body {
  blocco di visualizzazione;
  Larghezza: 100%;
  Altezza: 100%;
  Sfondo: # 000;
  Colore: #FFFF; }

04. Setup di navigazione

La navigazione è quella di visualizzare con il posizionamento fisso e con un indice Z sopra tutto ciò che può sembrare per coprire lo schermo intero indipendentemente da dove è scaduto l'utente. È inizialmente posizionato fuori controllo sul lato sinistro della vista visibile dello schermo. Una regola di transizione viene applicata per animare eventuali modifiche su una durata di un secondo.

 NAV {
  blocco di visualizzazione;
  Posizione: fissa;
  ridimensionamento della scatola: Border-Box;
  Top: 0;
  a sinistra: -100VW;
  z-index: 9999;
  imbottitura: .5em 1em .5em 1em ;;
  Larghezza: 100VW;
  Altezza: 100VH;
  Text-Align: Center;
  Sfondo: rosso;
  Transizione: tutti e 1; }

05. NAV Apri e icona

La posizione sinistra della navigazione è impostata su zero quando è stata applicata una classe "aperta", attivando la transizione animata definita nel passaggio precedente. Il primo figlio della navigazione è l'icona Espansione, che utilizza il posizionamento fisso per rimanere sempre visibile al centro del lato sinistro dello schermo.

 nav.open {
  a sinistra: 0;
}
NAV *: First-Child {
  Posizione: fissa;
  Imbottitura: 1em;
  Cursore: puntatore;
  a sinistra: 0;
  TOP: 50VH;
  chiaro: entrambi; }

06. Collegamenti di navigazione

Ogni collegamento di ancoraggio all'interno del contenitore di navigazione è impostato per essere quattro volte la dimensione del testo predefinito. Il loro colore è impostato sul nero, con un margine applicato in alto per garantire la spaziatura verticale è visibile. Impostazione del loro display come "Block" render visualizza ogni collegamento automaticamente impilare verticalmente.

 NAV A {
  blocco di visualizzazione;
  Dimensione del carattere: 4Em;
  Colore: # 000;
  Fammari: Arial;
  Decorazione del testo: nessuno;
  Margine-Top: .2em;
}

07. Ascoltatore JavaScript.

Creare un nuovo file chiamato 'code.js'. Questo passaggio attende fino a quando la pagina è stata caricata, su cui cerca il primo figlio di tutte le navigazioni con l'attributo "Data-Action" impostato su "Espandi". Questo primo figlio, essendo l'icona aperta, ha un ascoltatore di eventi "click" applicato, su cui attiva l'elemento per avere o non avere una classe "aperta" applicata.

 Finestra.AddeventListener ("Carica", funzione () {
  var nodes = document.querySeleTrall ('NAV [DATA-AZIONE = "Espandi"] *: First-Child');
  per (var i = 0; i & lt; nodes.length; i ++) {
  nodi [i].ADDeventListener ("click", funzione () {
  Se (This.Preentnode.classname == "Apri") questo.Parentnode.classname = "";
  altrimenti questo.parentnode.classname = "aperto";
  }););
  }
}););
***

Questo articolo è stato originariamente pubblicato in emissione 274 di Web Designer di Web Design Web Design. Comprare il problema 274 qui o Iscriviti al web designer qui .

Articoli Correlati:

Top Tendenze di navigazione web
10 regole di grande esperienza utente
Aggiungi segnali visivi al tuo sito

Crea un menu Slide-out

01. Inizio del documento

02. Contenuto della pagina

03. Iniziazione CSS.

04. Setup di navigazione

05. NAV Apri e icona

06. Collegamenti di navigazione

07. Ascoltatore JavaScript.

Come si fa - Articoli più popolari

Come disegnare un braccio

Come implementare modalità luce o scura in CSS

Come creare un logo retrò con Affinity Designer

Come aggiungere texture ai tuoi pastelli con i primer

15 suggerimenti ritratto fantasy

Come scolpire un goblin stampato 3D

Come creare Hair in Cinema 4D

Crea effetti antincendio 3D

Categorie