Come evidenziato nel capitolo “Sistemi di navigazione” di questa guida il cosiddetto “Menu off canvas” rappresenta, ad oggi, il pattern più utilizzato per gestire i menu di navigazione all’interno di un sito responsivo nel momento in cui il sito stesso dovesse essere visualizzato su di un dispositivo di piccole dimensioni (smartphone).

In questo schema quando il menu viene visualizzato, cliccando per questo su di un apposito pulsante, il corpo principale del documento scorre interamente verso destra (o sinistra) per lasciare spazio proprio al menu

Uikit consente di realizzare un sistema di navigazione del tipo di quello evidenziato in figura mediante il componente “Off-canvas” della sezione javascript

ATTENZIONE! La documentazione ufficiale può essere consultata al seguente indirizzo http://getuikit.com/docs/offcanvas.html

Le regole CSS relative a questo componente sono localizzate tutte nel file uikit.css all’interno della sezione “Component: Off-canvas”

Le istruzioni javascript necessarie per il corretto funzionamento del componente sono localizzate invece nel file uikit.js

ATTENZIONE! Il componente Off-canvas è un componente javascript per cui, affinchè possa funzionare in maniera corretta è necessario verificare di aver inserito nella sezione < head > della pagina non solo il collegamento alla libreria uikit.css ma anche quello alla libreria javascript uikit.js

In realtà, nel caso in cui questo dovesse essere l’unico componente javascript del framework che si intende implementare all’interno del sito, si potrebbe pensare di utilizzare, non l’intera libreria uikit.js, ma solamente la libreria relativa allo specifico componente ossia il file offcanvas.js (o meglio ancora la sua versione minificata).

In questo modo è vero si che otterremo un vantaggio (seppur piccolo) in termini di prestazioni della pagina (la libreria offcanvas.js ha sicuramente un peso minore rispetto al file uikit.js) occorre però fare molta attenzione nell’adottare questa soluzione, perché nel momento in cui dovessimo poi utilizzare un qualsiasi altro componente javascript la presenza, all’interno del nostro sito, della sola libreria offcanvas.js, non ne garantirà ovviamente il corretto funzionamento.

ATTENZIONE! Nel caso in cui non si dovesse essere assolutamente sicuri di quale libreria javascript caricare si consiglia di utilizzare sempre l’intera libreria uikit.js (magari nella sua versione minificata)