Share
La navigazione è l'interfaccia utente richiesta su qualsiasi sito web. Indipendentemente dalla singola pagina in scala o dall'e-commerce in piena regola, un sito Web necessita di una navigazione per consentire agli utenti di spostarsi tra le pagine e le sezioni. Seguendo il nostro precedente tutorial su Material Design Lite Grid, in questa puntata vedremo come usare un altro componente MDL: la Navigazione.
Prima di iniziare, non dimenticare di includere le librerie MDL; i fogli di stile e il JavaScript all'interno di capo della tua pagina:
Ora possiamo iniziare a costruire la navigazione.
La navigazione in MDL è un sottocomponente di Layout, insieme agli altri come la griglia, le schede e il piè di pagina. La forma base di navigazione in MDL comprende il nome del sito, un paio di menu di collegamento e una navigazione fuori tela.
Per crearne uno, aggiungi un vuoto div con mdl layout e MDL-js layout allegato. Queste due classi sono obbligatorie. Il mdl layout class applica stili predefiniti che fondamentalmente assicurano che la componente dell'interfaccia utente, principalmente la navigazione, sia strutturata correttamente. Nel frattempo, il MDL-js layout aggiungerà qualche comportamento dinamico attraverso JavaScript che include l'aggiunta di nuovi elementi e un paio di classi extra per rendere la funzione di navigazione.
All'interno di questo div, creare un intestazione elemento con il MDL-layout__header classe allegata.
Quindi, creane uno nuovo div con MDL-layout__header fila. Questo è l'elemento in cui verrà effettivamente impostata la navigazione.
Avvolgi il nome del sito usando a campata elemento con MDL-layout titolo classe associata, quindi un tag di ancoraggio con un URL che punta alla pagina iniziale. Puoi anche sostituire il testo con un'immagine del logo del tuo sito.
Acme
Creare un div sotto il nome del sito con MDL-layout spacer classe allegata. Questo div aggiungerà spazio tra il nome del sito e alla fine sposterà la navigazione a destra nell'intestazione.
Acme
Ora, aggiungiamo i menu di navigazione sotto il distanziatore usando il nav elemento.
Acme
Infine, aggiungi un nuovo div con il MDL-layout__drawer fuori da intestazione elemento per costruire la navigazione fuori dalla tela.
AcmeAcme
Mentre ricarichi la pagina, la navigazione fuori dalla tela dovrebbe funzionare immediatamente; dovresti trovare l'icona "hamburger" per attivarla e disattivarla. Provaci:
Tuttavia, come puoi vedere sopra, la barra di navigazione, il nome del sito e il menu di navigazione sono nascosti. MDL le nasconde di proposito quando viene visualizzata tramite finestre di dimensioni tablet. Questa è in realtà una decisione presa in considerazione dal team MDL. Il menu orizzontale è scarsamente adattato in termini di ridimensionamento orizzontale, in particolare se sono presenti dozzine di menu. Ad un certo punto, non si adatterà a una finestra stretta e molto probabilmente collasserà o si sovrapporrà all'altra UI nella navigazione.
Tuttavia, se desideriamo mantenere la sua visibilità in una finestra più piccola, aggiungere il MDL layout --header fisso in linea con il mdl layout classe.
... più contenuto qui ...
Questa classe costringerà la navigazione a essere visibile su telefoni e tablet.
I moduli di ricerca sono un elemento supplementare comune nella navigazione del sito web. Possono essere davvero utili per gli utenti che potrebbero non essere sicuri di quale menu passare per trovare il contenuto che stanno cercando. Con il modulo di ricerca, possono semplicemente digitare e cercare.
Trova l'HTML completo per compilare il modulo di ricerca sotto il nav elemento
... più contenuto qui ...... più contenuto qui ...
Qui abbiamo effettivamente definito due diversi componenti MDL, vale a dire il campo di testo e il pulsante. Il pulsante appare come un'icona di ricerca che espanderà il campo di inserimento della ricerca quando si fa clic:
La navigazione in MDL è una componente enorme enorme dato il numero di variazioni che possiamo organizzare per diversi scenari. In questo tutorial, abbiamo semplicemente creato una navigazione di base utilizzando le classi essenziali.
La navigazione può essere ulteriormente estesa con classi di utilità o aggiungendo altri componenti da MDL. Ad esempio, possiamo rendere trasparente lo sfondo di navigazione e utilizzare un'immagine di sfondo, impostare la navigazione fuori dalla tela sempre visibile, effettuare la navigazione non-appiccicoso, e persino sostituire i menu di collegamento con schede che potrebbero essere utili per un sito Web a pagina singola.
Il componente di navigazione, tuttavia, è piuttosto supponente.
Gli stili di navigazione sono stati controllati tramite Chrome DevToolsAd esempio, il padding sul lato sinistro della navigazione impostato per 72px suggerisce che una navigazione dovrebbe avere una navigazione fuori dalla tela con l'icona "hamburger". A volte, potremmo aver bisogno solo di una navigazione decente con funzionalità di base. Tuttavia, la navigazione è un componente solido. Non vedo l'ora di miglioramenti e forse funzionalità aggiuntive.
Nel prossimo tutorial, esamineremo due componenti che abbiamo già esaminato brevemente: pulsanti e campi di testo. Fino alla prossima volta!
Accentsconagua