Lavorare con elementi nidificati è complicato perché, ad esempio, quando sposti un elemento genitore con esso, anche tutti i suoi figli si spostano. Pertanto, applicheremo alcuni trucchi che supporteranno le traduzioni 3D desiderate dei sottomenu e dei loro figli. L'idea principale è aumentare il valore di cast per garantire che i sottolivelli non vengano mostrati quando ci muoviamo tutti un po' per esporre i bordi degli elementi genitori. Naturalmente, questo non è necessario quando l'elemento genitore copre il sottomenu.
Tieni presente che stiamo utilizzando proprietà CSS (trasformazione, transizione) che funzionano solo nei browser moderni. Un esempio di alternativa per browser non di supporto si trova alla fine del file component.css, che mostra semplicemente il menu di primo livello. Facciamo lo stesso in assenza di JS.
Per il menu, abbiamo bisogno della seguente struttura nidificata:
Qui, ogni livello è avvolto da un tag div con la classe mp-level. Non potremo applicare questo tipo di posizionamento fisso al menu, in quanto le trasformazioni lo faranno comportare come un elemento posizionato assoluto, quindi dovremo utilizzare il posizionamento assoluto, che porterà al problema del comportamento indesiderato del sito (menu scorrimento e in base all'altezza del documento).
Per evitare di scorrere il menu e tagliarlo se il contenuto del sito è troppo corto, utilizzeremo un piccolo trucco prendendo la seguente struttura di pagina:
Ora assegniamo i seguenti stili CSS agli elementi:
Html, body, .container, .scroller (altezza: 100%;) .scroller (overflow-y: scroll;) .scroller, .scroller-inner (posizione: relativo;) .container (posizione: relativo; overflow: nascosto; sfondo: # 34495e;)
Ciò consentirà lo scorrimento del contenuto quando il menu della versione mobile del sito viene chiuso e diventerà anche uguale all'altezza della finestra del browser. In questo modo, imitiamo ciò che otterrebbe un posizionamento fisso. Il plugin stesso può essere chiamato in questo modo:
Nuovo mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"));
Oppure, se i sottomenu dovessero coprire i livelli precedenti:
Nuovo mlPushMenu (document.getElementById ("mp-menu"), document.getElementById ("trigger"), (tipo: "cover"));
Shifter è un plug-in jQuery per una semplice navigazione mobile a scorrimento. Shifter funziona controllando gli elementi target nel DOM e gli eventi obbligatori con essi.
SlickNav
SlickNav è un plug-in di menu mobile reattivo per jQuery con funzionalità come supporto menu multilivello, compatibilità cross-browser, markup flessibile e semplice e degrada con grazia senza JavaScript.
Menutron
Menutron converte i menu di navigazione da un elenco a un menu di selezione quando il browser viene ridimensionato. Sui dispositivi mobili, il menu di selezione visualizza un controllo nativo, semplificando la selezione di un elemento.
Menu reattivo e sensibile al tocco
Un tutorial per creare una navigazione a discesa reattiva e touch-friendly. La tecnica è composta da 3 parti principali, che sono Navigazione a discesa semplice basata su HTML e CSS, implementazione di Reattività utilizzando query multimediali e loro accettazione per dispositivi touchscreen utilizzando il plug-in jQuery super piccolo.
jQuery.mmenu
MMENU è un plug-in jQuery per la creazione di un'applicazione di menu a doppio scorrimento per il tuo sito Web mobile o il tuo sito Web reattivo.
Navobile
JQuery Navobile è un plug-in jQuery che semplifica la navigazione mobile. Navobile utilizza i CSS per applicare le traduzioni CSS3, il rilevamento mobile e il fissaggio della posizione di navigazione.
FlexNav
FlexNav è un primo esempio mobile di utilizzo delle query multimediali e di un bel menu a strati con supporto per tocco, apertura al passaggio del mouse e accessibilità alla scheda di input da tastiera.
Menu Retina-Ready Reattivo
Menu reattivo con tre layout per diverse dimensioni del browser. Il menu cambia automaticamente in uno dei tre diversi layout a seconda delle dimensioni della finestra del browser: una versione per righe "desktop", una versione ottimizzata per tablet a due colonne e una versione mobile con un collegamento al menu per mostrare e nascondere la navigazione per schermi di piccole dimensioni. I caratteri sono stati utilizzati come icone per evitare sfocature a risoluzioni diverse.
slimMenu
slimMenu è un plug-in jQuery leggero creato per creare menu di navigazione veloci e stratificati al volo. Con slimMenu, non devi più lottare con le richieste multimediali per creare menu reattivi o altri plug-in pesanti per creare sottomenu a strati. È reattivo al 100% per dispositivi mobili.
Menu a scorrimento orizzontale
Una semplice diapositiva del menu orizzontale con un layout di griglia in miniatura come un sottomenu. Il menu scorre dall'alto quando si fa clic sulla voce del menu principale e le voci secondarie scompaiono. Dopo aver fatto clic su un altro elemento, l'altezza del sottomenu si regolerà e il contenuto scomparirà dentro e fuori quando si cambia.
Una delle aree che richiede un'attenzione particolare durante lo sviluppo di un design dell'interfaccia per un dispositivo mobile è il menu di navigazione. Se il sito ha molte sezioni o pagine, è necessaria un'abilità speciale per posizionare tutti gli elementi in una risoluzione dello schermo ridotta. Molto spesso, la navigazione si trasforma in un mucchio di righe o in un mucchio di pulsanti impilati uno sopra l'altro. In questo tutorial, esamineremo uno dei modi per creare la navigazione utilizzando jQuery.
Compito
Gli screenshot seguenti mostrano le situazioni con i modelli sugli schermi mobili. Se la navigazione ha 3 o 4 pulsanti, la sua posizione verrà salvata in una riga. Ma quando il menu contiene 6 o più voci, il risultato è un brutto mucchio.
Soluzione
Un modo comune consiste nel convertire la navigazione in un elenco a discesa in base all'elemento selezionato. Questa soluzione ha lo svantaggio che l'elemento select non può essere stilizzato con CSS. I plugin Javascript come Chosen ti consentono di personalizzare il menu o devi accontentarti degli stili di sistema per il menu a discesa. Inoltre, l'utente può essere confuso quando la versione widescreen della struttura del menu viene trasformata in un elenco a discesa su un dispositivo mobile.
2) Uscita come blocco
Un altro modo popolare è modellare le voci di menu come elementi impilati verticalmente. Tuttavia, questo approccio occupa molto spazio di intestazione. Se la navigazione contiene molti pulsanti, l'utente dovrà scorrere un lungo elenco per arrivare alle informazioni.
3) Icona del menu
E l'ultimo metodo che esamineremo nel nostro tutorial è utilizzare un'icona di menu per abilitare la navigazione. Questo approccio consente di risparmiare spazio sulla pagina (che è importante su un dispositivo mobile) e ti dà il pieno controllo sull'aspetto con i CSS. L'icona del menu e la navigazione stessa possono essere presentate secondo lo stile generale del sito.
Navigazione mobile inclusa con jQuery
In questo tutorial, ti mostreremo come creare la navigazione per un piccolo schermo. JQuery verrà utilizzato per preparare l'icona del menu e abilitare la navigazione. Non sono necessari tag HTML aggiuntivi per il funzionamento della navigazione.
Per il nostro menu verrà utilizzata una struttura semplice:
Il menu richiede il codice JavaScript per funzionare. La funzione prepara l'elemento
