WebSite X5Help Center

 
Enzo I.
Enzo I.
User

Impostare hamburger menu su più risoluzioni  it

Autore: Enzo I.
Visite 1381, Followers 1, Condiviso 0  

Buongiornoa a tutti :)

Non ho trovato risposte alla mia domanda cercando tra i topic, quindi ne apro uno io.
Sto realizzando un sito web responsive, all'interno del quale vorrei avere un hamburger menu su tutte le visualizzazioni che non siano desktop.

Per farvi capire meglio: al di sotto della risoluzione 1150px vorrei fare in modo che l'oggetto "menu" inserito in prima riga si veda in modalità hamburger. Questo sono riuscito a farlo solo per la sticky bar (quella che rimane fissa mentre scorri in basso la pagina).
Vorrei attuare questa modifica per mantenere sempre sulla stessa riga il logo e il menu in tutte le risoluzioni (altrimenti mi si creerebbe troppo spazio vuoto tra un oggetto e l'altro per via degli stili delle celle).

Il sito in questione, ospitato su un dominio "muletto" e ancora in fase di costruzione è http://growtest.netsons.org

In attesa di un vostro riscontro vi auguro una buona giornata :)
Enzo

Postato il
10 RISPOSTE - 1 CORRETTO
Skeggia 12
Skeggia 12
Moderator

molto semplicemente, alle varie risoluzioni, riduci lo spazio assegnato al menu, in orizzontale per il menu orizzontale e riducendo l'altezza per il menu in verticale... a questo punto le voci non entrano più nello spazio e si crea automaticamente il menu hamburger...

Leggi di più
Postato il da Skeggia 12
Enzo I.
Enzo I.
User
Autore

Grazie per la tua risposta!

Il mio menù è orizzontale, quindi dovrei "stringere" il menù su meno colonne dalle impostazioni nella pagina? Credevo che la disposizione dei contenuti in una pagina fosse la stessa per ogni risoluzione, ma che poi tramite le opzioni responsive gestivo l'ordine e quando "andare a capo" spezzando le righe, in che modo agisco sulla larghezza?

So che la soluzione logica è quella di stringere lo spazio per il menù, solo che non lo pensavo possibile in funziona della risoluzione. Sicuramente sarà banale, ma non saprei come fare!

Grazie, Enzo.

Leggi di più
Postato il da Enzo I.
Skeggia 12
Skeggia 12
Moderator

ti allego screenshot...

Leggi di più
Postato il da Skeggia 12
Enzo I.
Enzo I.
User
Autore

Ah ho capito, perdonami! E' che da quando ho la versione 14 mi sono abituato a non utilizzare gli header e a crearli direttamente in prima riga (inserendo un menu e uno sfondo tramite lo stile delle righe), in quanto così posso utilizzare colori differenti per il menu in funzione del colore dello sfondo "header".

Mi consigli di tornare alla vecchia maniera, cioè quella corretta (presumo)?

Leggi di più
Postato il da Enzo I.
Incomedia
Elisa B.
Incomedia

Buongiorno Enzo, 

confermo che seguendo le indicazioni che ti ha gentilmente fornito Skeggia potrai ottenere l'effetto desiderato. Tieni conto però che il menù in questo caso deve trovarsi nell'header al Passo 2-Contenuto del Modello. Utilizzandolo sulla pagina, come, se ho ben capito, stai facendo ora, le voci del menù andrebbero a capo.

Fammi sapere se posso aiutarti. Buona giornata.

Leggi di più
Postato il da Elisa B.
Enzo I.
Enzo I.
User
Autore
Elisa B.
Buongiorno Enzo,  confermo che seguendo le indicazioni che ti ha gentilmente fornito Skeggia potrai ottenere l'effetto desiderato. Tieni conto però che il menù in questo caso deve trovarsi nell'header al Passo 2-Contenuto del Modello. Utilizzandolo sulla pagina, come, se ho ben capito, stai facendo ora, le voci del menù andrebbero a capo. Fammi sapere se posso aiutarti. Buona giornata.

Buongiorno Elisa e grazie per la tua risposta. Hai capito perfettamente la mia domanda e il mio problema :)
Non ho utilizzato l'header per l'inserimento del menu in quanto sarei vincolato a utilizzare uno sfondo header uguale per ogni pagina. Eliminando invece l'header e utilizzando un menu per ogni pagina posso applicare uno sfondo "header" differente tramite lo stile delle righe, non so se mi sono spiegato...

Vorrei capire se è possibile trovare un compromesso.
Enzo

Leggi di più
Postato il da Enzo I.
Skeggia 12
Skeggia 12
Moderator

se vuoi avere sfondi diversi dell'header per ogni pagina, potresti intervenire tramite codice, da inserire in tab esperto nelle proprietà di ogni pagina... avendo sempre il menu in header, come è più corretto e magari adeguando i colori delle voci del menu sempre tramite codice... un piccolo lavoro in più all'inizio per poi avere l'effetto che hai pensato per ogni pagina... se vuoi optare per questa soluzione, magari possiamo vedere il codice da impostare...

Leggi di più
Postato il da Skeggia 12
Enzo I.
Enzo I.
User
Autore
Skeggia 12
se vuoi avere sfondi diversi dell'header per ogni pagina, potresti intervenire tramite codice, da inserire in tab esperto nelle proprietà di ogni pagina... avendo sempre il menu in header, come è più corretto e magari adeguando i colori delle voci del menu sempre tramite codice... un piccolo lavoro in più all'inizio per poi avere l'effetto che hai pensato per ogni pagina... se vuoi optare per questa soluzione, magari possiamo vedere il codice da impostare...

Questa soluzione sembrerebbe l'ideale, solo che ho una domanda: se guardi i vari header che ho realizzato in questo modo sul sito, come per esempio questo "http://growtest.netsons.org/info-point.html", noterai che utilizzo uno sfondo come background, un immagine in primo piano e un testo come titolo (in questo caso l'immagine è quella coi due avatar). L'immagine e il titolo li inserisco a parte così da poter adattare perfettamente il contenuto per il responsive, se mettessi l'immagine all'interno dello sfondo header, in risoluzioni più basse potrebbe non essere visualizzata. Spero di essermi spiegato bene.

Quindi con il codice, come posso gestire anche questo? Non c'è invece un codice per rendere il menu hamburger al di sotto di determinati break-point?

Enzo

Leggi di più
Postato il da Enzo I.
Enzo I.
Enzo I.
User
Autore

Ho appena finito di fare delle modifiche, credo di aver trovato una soluzione semplice e tutto sommato carina.

In sostanza, si tratta di "slegare" il menu dall'header che ho creato all'interno di ogni pagina: ho abilitato l'header per ogni risoluzione dandogli un'altezza minima, quanto basta per inserire il menu, mentre in ogni pagina si vedrà l'header al di sotto del menu. In questo modo posso configurare dalle impostazioni responsive l'hamburger menu per le risoluzioni desiderate.

Potete darmi un parere per questa alternativa? Grazie!
Non ho ancora rimosso il menu da ogni pagina del sito, lo farò domani, dovreste comunque capire il concetto :)

Enzo

Leggi di più
Postato il da Enzo I.
Incomedia
Elisa B.
Incomedia

Buongiorno Enzo, 

direi che questa soluzione possa funzionare tranquillamente. Se hai difficoltà non esitare a contattarci. 

Grazie! Buona giornata.

Leggi di più
Postato il da Elisa B.