Menu a Griglia Responsivo
Il Menu a Griglia in Navi+ è progettato con un approccio mobile-first. Questo significa che configuri e ottimizzi il menu prima per il mobile, e la versione desktop si adatterà automaticamente dal layout mobile invece di essere ricostruita da zero.
I Menu a Griglia sono tipicamente utilizzati per evidenziare caratteristiche chiave o categorie importanti, solitamente con 8 a 12 elementi. Su mobile, la griglia è comunemente visualizzata in 2 a 3 righe, con 4 a 5 elementi per riga. Per ottenere questo, puoi utilizzare l’impostazione del Layout Larghezza, come 3/12 o 2/10, per controllare come la griglia si adatta sugli schermi più piccoli.
Su desktop, la larghezza dello schermo disponibile è molto più grande (spesso equivalente a 2–3 schermi mobili). Se la griglia mostra ancora solo 4–5 elementi per riga, può sembrare troppo sparsa. Per risolvere questo, Navi+ fornisce l’impostazione del rapporto di visualizzazione Desktop/mobile. Ad esempio, quando imposti un rapporto di 2x, il numero di elementi mostrati per riga desktop sarà raddoppiato rispetto al mobile, risultando in 8–10 elementi per riga, creando un layout più bilanciato sugli schermi grandi.
Su mobile, i Menu a Griglia possono essere visualizzati in due modi. La prima opzione è a larghezza intera, dove la griglia riempie l’intera larghezza dello schermo, rendendo gli elementi facili da vedere e toccare. La seconda opzione è una griglia scorrevole orizzontalmente, dove le dimensioni degli elementi rimangono fisse e gli utenti possono scorrere a sinistra o a destra per esplorare più contenuti. Entrambe le opzioni funzionano bene su mobile, e puoi scegliere quella che meglio si adatta al tuo contenuto e caso d’uso.
| Su desktop, i gesti di scorrimento non sono comuni, quindi il Menu a Griglia è visualizzato con una larghezza fissa del 100%. Combinando il rapporto di visualizzazione Desktop/mobile con impostazioni di dimensione specifiche per dispositivo (utilizzando il formato 8 | 16, che significa 8 su mobile e 16 su desktop), puoi assicurarti che la griglia appaia chiara, piena e ben proporzionata sugli schermi più grandi. |
Questo approccio mantiene il tuo Menu a Griglia coerente tra mobile e desktop, facile da gestire e semplice da aggiornare—senza mantenere due sistemi di menu separati. Devi solo progettare il Menu a Griglia una volta su mobile, e Navi+ si occupa del resto.