Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End

Haciendo un Slideo

by
Difficulty:BeginnerLength:ShortLanguages:

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

In questo tutorial realizzerete un menu di navigazione laterale espandibile tramite JavaScript e CSS. Il risultato finale sarà il seguente:

Sliding Side Navigation Menu

Markup

Per iniziare, aggiungiamo del markup al nostro menu laterale:

Qui si vede che abbiamo creato un menu laterale div con classe sidenav. Successivamente abbiamo aggiunto la barra di navigazione superiore mediante un tag <nav>, e stiamo usando un SVG per l'icona del menu laterale.

L'attributo onclick dell'icona e il pulsante di chiusura attiveranno del codice JavaScript, che aggiungeremo poi.

Ricordate di inserire tutto il contenuto del sito all'interno del container div id="main" in modo che slitti a destra.

JavaScript

In seguito, aggiungete il codice JavaScript per le funzioni openNav e closeNav.

CSS

Infine, dovremo dare stile alla nostra pagina con del CSS per il menu laterale e i nostri collegamenti:

Notabody {overflow-x: hidden;} è necessario per assicurare che uno scorrimento orizzontale non appaia quando questo viene utilizzato con il nostro CSS esistente.

Potete ora controllare il vostro menu e provarlo nel browser.

Utilizzando jQuery

Se volete creare il menu laterale JavaScript usando jQuery, potete farlo sostituendo il codice JavaScript fornito prima con la sezione seguente:

Rimuovere la Slide

Per far apparire il menu senza animazione di scorrimento, modificate semplicemente la proprietà transition in CSS, come mostrato in versione abbreviata qui sotto:

Ciò farà apparire la modifica istantaneamente dal momento che non è specificato alcun delay in transition. Il parametro di default che abbiamo usato è 0.5s.

Conclusione

Realizzare un menu laterale richiede poche righe di codice e non necessita l'utilizzo di molte risorse. Inoltre, se jQuery è già presente sulla pagina per altri compiti, il lavoro può essere svolto con ancora meno righe di codice e una personalizzazione maggiore.

Per rendere il codice responsive in modo da lavorare con diverse risoluzioni di schermo a seconda del dispositivo dovrete semplicemente modificare il CSS aggiungendo media queries per i casi specifici.

Per proseguire ulteriormente, potrete dare stile al vostro menu con un framework CSS come Bootstrap o Bulma.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.