L'intestazione ha un menu di navigazione che preferirei mantenere, ma occupa troppo spazio. Cosa posso fare per farlo sembrare buono sui dispositivi mobili?Come posso convertire la navigazione di un sito desktop in un menu comprimibile?
Una possibilità è utilizzare i togglers, pulsanti che fanno apparire/sparire il contenuto interno. La libreria uraniumjs contiene alcuni widget, uno dei quali è molto semplice, tuttavia è useful toggler implementation. Lo fa anche in modo discreto.
È necessario includere il file js uranium, quindi è sufficiente utilizzarlo. Quindi, puoi farlo come spiegato di seguito.
È necessario trasformare il codice del menu in tre parti: un contenitore wrapper, una sezione "pulsante" e una sezione contenuto. Per identificare ciascuna di queste parti, utilizzare questi dati attributi:
data-ur-set="toggler"
(aggiungere questo attributo al involucro)
data-ur-toggler-component="button"
(aggiungere questo attributo alla sezione "pulsante")
data-ur-toggler-component="content"
(aggiungere questo attributo alla sezione contenuto)
è necessario includere queste regole CSS da qualche parte troppo:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
Si può vedere un piccolo esempio in esecuzione qui: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Entrambi i siti mobili Bloomingdales e Macys utilizzano tale approccio. Puoi vederlo lavorare lì.