Break point 
Autore: Vincenzo Errico
Visite 2775,
Followers 2,
Condiviso 0
Ciao, ho impostato i Break point a 480, 720, 960, 1200. La domanda è questa: è possibile azionare il menu hamburgher dai 720px in giù e lasciare alle risoluzioni più alte il menu desktop? Grazie mille
Postato il
... penso di sì; ...basta provare se è possibile impostare il primo a 720... ... ...l'importante è che l'eventuale menu orizzontale ci stia dentro per intero...
.
Autore
si ci sta dentro... ma come dici tu dovrei eliminare il 960 e il 1200?
Autore
Perchè non vedo opzioni che permette di scegliere da che break point iniziare a visualizzare il menu hamburgher! O mi sbaglio?
... non posso vedere/provare; ...tu stai provando con un modello Personalizzato...?...
... dovrebbe essere legato anche alle impostazioni generali del sito; ...prova a vedere qui: http://help.websitex5.com/it/v12/evo/imp_generali.htm?zoom_highlightsub=breakpoint
.
Autore
A quanto ho capito non c'è possibilità! Nel mio caso al di sotto dei 1200px scatta subito il menu responsive! Ci sarà (per rimediare) un po' di codice da inserire che permetta di bloccare questa scelta automatica? lasciando il menu desktop anche al breck point inferiore?
Autore
Una regola CSS che blocchi quella nativa e settare una diversa? Sempre che di CSS si tratti! :)
Vincenzo.. non so se può esserti utile però sul file css in
css/custom-header-fixed-menu-mobile.css
ha un valore fissato a:
/* a 1200 compare il menu mobile */ @media screen and (max-width: 1200px)
prova ad editarlo manualmente e portarlo al valore che a te interessa.. poi vedi se ti funziona.
...non posso dire molto e secondo me si dovrebbe cercare di agire da programma senza manomettere; ...comunque con JS si potrebbero disabilitare i CSS, ed a seguito aggiungere le proprie regole...
.
oppure provare passo 5 opzioni avanzate codice ....
prova ad inserire .... inserisci:
<style>
/* a 720 compare il menu mobile */
@media screen and (max-width: 720px) {
/* menu mobile */
#imMnMn > ul {
bottom: auto !important;
top: 60px !important;
width: 129px;
overflow: auto;
height: calc(100% - 60px);
}
#imMnMn .imMnMnTxt {
border: none;
border-bottom: 0px solid #fff;
}
#imMnMn .hamburger-menu-close-button {
background-color: #fff;
font-size: 60px; color: #646464;
font-weight: bold;
padding: 0;
text-align: center;
width: 130px;
}
}
@media screen and (max-width: 480px) {
/* menu mobile */
}
</style>
Autore
Ciao giancarlo, grazie! Ho provato a modificare il css come dici ma non viene recepito! Bisognerebbe bypassare il codice sorgente scritto in automatico da website. Quel foglio css che fai riferimento l'ho inserito manualmente per fissare la barra di menu + intestazione e una modifica al menu hamburgher. Se vedi ora è online modificato come dici, ma nulla, non funziona purtroppo!
ho visto Vincenzo... peccato vediamo altre soluzioni da chi ne sa..
questo mi sembra monco però, cosa dovrebbe fare a quella misura...?....
@media screen and (max-width: 480px) {
/* menu mobile */
}
Autore
Ciao Kolasim, tu spresti come fare per disabilitare quel css per aggiungere una nuova regola? Di js (e non solo) non saprei... :)
è il css di Vincenzo
http://www.vincenzoerrico.it/css/custom-header-fixed-menu-mobile.css
Vincenzo inserendo il codice al passo 5 a me funzionava ... però evidentemente ci sono altri fattori da valutare...
ma lo hai postato tu....
ok capito ora.....è la mia età che avanza...
ad esempio in questo template il menu hamburgher si attiva solo a risoluzione molto bassa
http://quellidelcucuzzolo.altervista.org/templates/onetel/
Autore
Questo template è realizzato (per renderlo responsive) inserendo codice esterno non da programma. Cioè con una versione precedente alla 12.
... non posso dirti di più...
... (si potrebbe agire in modo mirato), ... per fare una cosa veloce, prima della chiusura di /HEAD inserisci questo SCRIPT:
<script> $('link[rel=stylesheet]').remove(); </script>
... e poi a seguire (sempre in /HEAD) rimetti tutti i TAG LINK REL dei CSS, escludendo quello dei MEDIA QUERY, che invece inserirai corretti con le tue regole...
.
Autore
mmmh, è complesso per il mio poco sapere! Grazie comunque!
Autore
Per disabilitare solo quella funzione specifica? Impossibile?
... faccio eccezione al [... non posso dirti di più...]
... la mia IDEA è semplice, basta provarla, (e mi sono reso conto che da spazio ad una infinità di altre ide!!! ... se avessi il programma!!!)...
... ho approfittato del template delle prove di Luigi per il GoTop, editando direttamente in rete e variando i valori di @media a casaccio nei CSS sostituiti, con risultato e prospettive eccezionali: http://goo.gl/TzhZB3
... valuta e provaci tu,; ... adesso dipende solo da te...
________________________
... np: ... comunque, e lo ripeto spesso, ...a parer mio tutta questa manipolazione non serve; ...il sito miglior tra quelli visti resta sempre quello che si sa fare con gli strumenti del Programma, senza strafare, e/o copiare siti di altri! che spesso lasciano il tempo che trovano!...
.
Autore
Confesso che non saprei dove mettere le mani, purtroppo!
... devi solo cimentarti e provare, postando il link di quello che hai fatto...
... proprio adesso ho riprovato sul template di Mirko che uso per test:
http://www.zspace.it/kolasim/trash/mirko12_media3.html
... le mie modifiche le troverai dal rigo nr. 43 al 48, a partire da:
<!-- alterazione @media KolAsim -->
... niente di più...
... poi guardati i valori assegnati (alla carlona) nei fogli CSS usati da me nei riferimenti @media ...
...
... se conosci il programma lo attui in meno di cinque minuti...
.
Autore
ok, ci provo grazie!
Ma noto guardando il sito su desktop che mi compare sempre la barra di scroll orizzontale quando restringo il browser! Perchè?
... certamente, ...perchè ha chiesto tu di vederlo normale sino a una certa misura, altrimenti verrebbero nascoste parti della pagina...
.
Autore
io intendevo normale solo per il menu non per i contenuti... cioè che al breck point inferiore (960) a quello massimo (1200 nel mio caso) rimanesse il menu invariato e solo al di sotto dei 960px far azionare il menu hamburger.
... allora controllati il file menu.css
.
Autore
ho provato già a modificarlo... ma senza successo! Come non reagisse a quella regola.
... non so cosa fai, comunque hai visto che si può controllare con semplicità...
... però sei tu che devi studiarti e modificarti a tuo piacere le istruzioni @media ...
...
.
Ciao Vincenzo , io ho lo stesso tuo problema come altri utenti che hanno scritto post al riguardo .
L'unica soluzione sarebbe quella che incomedia rilascisse un aggiornamento dove vi sia la possibilità di variare l'intervallo del breackpoint smartphone da 0 a 480 , così l'intervallo desktop sarebbe 480 a 960 ( o 1200 ) e la visualizzazione mobile avverrebbe solo sui smartphone .
Purtroppo non ho avuto da incomedia rassicurazioni sul possibile futuro aggiornamento.
Ciao, ho da poco improntato un sistema per realizzare un sito a tutto schermo, responsive senza uso di nessun codice e ho quindi lavorato parecchio sui breackpoint. Non sapevo molto all'inizio e trovavo logico che ci fosse una funzione che permettesse la scelta di quale breakpoint potesse definire l'apertura dell' menù hamburgher (HMB) , ma non c'e'. Si passa alla modalità impaginazione responsive quando apri la pagina su una finestra o su un monitor anche solo un px inferiore al numero dei px impostati per la pagina dei contenuti. Però girandoci un pò attorno un sistema c'e'. Esempio; tu imposti la pagina contenuti a 1200, si crea il primo BP automaticamente a 1200, e poi aggiungi 480, 720, 960 . A 1199 scatta l'impostazione responsive. Però, e stiamo parlando sempre di programma e non di codici, non è detto che debba per forza apparire anche il menù HMB perchè quello appare nel punto in cui i pix della finestra o schermo corrispondono alla larghezza del menù impostato . In pratica se il tuo menù all'interno della barra misura 720 px il menu HMB apparira con la finestra a 719 se poi fai un menù lungo 480, passerà HMB a 479.
Quindi ricapitolando , pagina contenuti 1200, BP a 960,720,480, menu largo 720, il menù HMB si apre a 719, unico accorgimento impostare le grafiche delle due strutture (principale e responsive) più simili possibili in modo da non notare, l'immediato passaggio al primo restringimento.
Qui un esempio
http://www.laboratoriowebonline.com/inlavorazione/pro12/
PS. Resto comunque sempre dell'opinione che queste funzioni dovrebbero essere messe a disposizione dal programma.
Ciao, ho messo le impostazioni per avere HMB a 720 che consigli ma non c'è verso di riuscire ad avere il sito come nel tuo esempio se mi puoi dare altri consigli. Grazie Roberto
... come detto all'inizio si può gestisce da programma, e nel caso della v.12_PRO hai anche a disposizione max 10 breakpoint, quindi per tutte le necessità immaginabili...
... ... come detto altre volte, quando la barra del menu non sta più nella pagina, si passerà in modalità responsive e se larga quanto l'intestazione l'hamburgher apparirà al primo breakpoint che definisce la larghezza del Sito...
... per capire cosa hai fatto posta il LINK del tuo esempio in modo che si possa valutare...
.
Ciao a tutti... Con evo 12 che ha solo 3 breakpoint impostati:
il problema sta nell'ultimo breakpoint, quello per smartphone.. provate a portarlo (stranamente!) da 480 a 720 e vedrete che il menù normale viene mantenuto fino a 720 px per un sito con larghezza di 1180 px totali (vedi screenshot).... Chiaramente poi bisogna capire cosa accade ai contenuti di ogni singolo sito portando l'ultimo breakpoint da 480 a 720... a me nel template che allego nel secondo screenshot non succede quasi nulla di anomalo ai contenuti portando l'ultimo breakpoint a 720, tranne nel testo di descrizione in alcune celle nella parte bassa della pagina (nella parte superiore delle celle), che diventa da visualizzazione smartphone..però la cosa è accettabile a mio avviso...e per il resto non vedo grossi problemi.. magari bisogna poi solo sistemare in un certo modo, diverso, alcuni contenuti in base al sito di ognuno. E fa tutto il programma così.
e qui è la dimostrazione che il sito largo 1180 px mi mantiene il menù desktop fino a 720 px (vedi cerchio rosso in alto a destra)
chiaramente se il menù desktop contiene tantissime voci, beh non c'è santo che tenga... a me però, prima di impostare l'utimo breakpoint da 480 a 720, mi appariva l'hamburger già a 850 circa.. certo la cosa migliore sarebbe, come hanno proposto in molti di poter gestire in modo manuale e a propria discrezione i menù desktop e responsive.