Share
In questa puntata della nostra serie Learning Material Design Lite (MDL), esamineremo il menucomponente. Questo è un componente che potrebbe occasionalmente essere necessario fornire un menu contestuale delle azioni disponibili.
In Facebook, ad esempio, è possibile visualizzare un menu contestuale distribuito nella barra laterale in cui viene visualizzato un elenco di amici online e offline. Il menu si trova in basso, in linea con il modulo di ricerca, illustrato con a Ingranaggio icona.
Menu contestuale della sidebar di Facebook.C'è un altro buon esempio in Gmail. Puoi trovare questo menu contestuale in linea con il Posta in arrivo scheda, sotto il Comporre pulsante. Fornisce azioni per ordinare i messaggi in arrivo nella Posta in arrivo per una migliore gestione della posta elettronica.
In questo tutorial, vedremo come implementare un menu contestuale usando il componente del menu MDL. Tuttavia, prima di iniziare, aggiungi le librerie MDL, i fogli di stile e il codice JavaScript, a capo del tuo documento.
Una volta fatto, andiamo!
Supponiamo di avere un sito Web per la nostra attività e ora l'azienda ha diverse filiali in diversi paesi. Ora abbiamo bisogno che il sito web sia presentato in più lingue. Questo è uno dei buoni scenari in cui potremmo utilizzare il componente del menu nel nostro sito Web: cambiare lingua.
Per creare questo menu di cambio lingua, iniziamo creando un elemento pulsante con un'icona id quindi possiamo collegarlo al menu. Useremo l'icona della lingua di Material Design.
Sentiti libero di optare per un pulsante piatto, se lo trovi più adatto per la progettazione generale del tuo sito web, ad esempio:
Successivamente, aggiungeremo l'elenco delle lingue. Prima di farlo, dobbiamo decidere dove deve apparire il menu in relazione alla posizione del pulsante. A seconda del layout del sito Web, il selettore di lingua potrebbe essere visualizzato nella navigazione. Potremmo anche aggiungerlo ovunque nella parte inferiore, nella sezione del piè di pagina.
Se troviamo la posizione nell'angolo in basso a destra del sito, aggiungeremo il menu usando la classe Modifier: MDL-menù - in alto a destra. Il menu, come suggerisce il nome della classe, apparirà in alto a sinistra del pulsante. Sostituisci la classe con una delle seguenti classi per posizionare il menu in modo diverso:
Accentsconagua
MDL-menù - in basso a destraMDL-menù - in basso a sinistra: questo è il valore predefinito se nessun'altra classe è associata al menu. Il menu apparirà in basso, allineato a sinistra.MDL-menù - in alto a sinistraPotremmo aggiungere il menu ovunque. Ma è meglio tenerlo vicino, all'interno dello stesso contenitore del pulsante.
La cosa da tenere a mente per il markup del menu è la per attributo. Come puoi vedere sopra, il per il valore dell'attributo deve corrispondere a id del pulsante.
Se il pulsante è posizionato nella parte superiore del sito Web, il menu dovrebbe apparire in basso, aggiungendo il MDL-menù - in basso a destra classe.
Un'altra possibile applicazione del componente del menu è di migliorare la nostra cartolina del blog dal tutorial precedente. Lì abbiamo il post con un pulsante di condivisione; potremmo usare il componente del menu per fornire opzioni per selezionare i social network:
Il componente del menu MDL è facile da implementare. Come abbiamo appreso qui, richiede un elemento di lista non ordinato con alcune classi, e quindi abbiamo il menu pronto per andare - così semplice come quello.
Nel prossimo tutorial, vedremo come personalizzare tutti i componenti che abbiamo usato finora. Ci vediamo lì!
