Formattazione dell'hamburger button 
Author: danilo tomasettaCirca 6 mesi fa ho posto alla community la questione di come formattare l'hamburger button.
Questa risposta di Esse Di è sicuramente soddisfacente
Il codice sottostante regola bordo, sfondo e barre dell'hamburger menu
Testato con le ultime versioni di Firefox, Chrome e Edge
<style>
.hamburger-button {
width: 30px !important;
height: 30px !important;
background-color: #FF0000 !important;
border: 2px solid #00FF00 !important;
border-radius: 5px !important;
}
.hamburger-bar {
width: 65% !important;
height: 4px !important;
background-color: #FFFF00 !important;
}
</style>
Postato il 25/10/2019 16:01:18 da Esse Di
Il problema che pongo ora è in quale cartella tra le sottocartelle di Preview devo inserire questo codice CSS, visto che esplorandole un pò tutte non ho trovato nessun codice CSS inerente alla forma, dimensione, sfondo, ecc dell'hamburger menu. Inoltre chiedo, questo inserimento manuale verrà mantenuto dopo eventuali e probabili aggiornamenti del sito ?
Graie fin d'ora a tutti quelli che vorranno delucidarmi a riguardo
in quale cartella ?
Esistono in website delle sezioni apposite per inserire i codici extra...
Scusa ma come l'avevi provato allora quel codice ?
Se un codice vuoi che venga applicato a tutto il sito mettilo nella sezione SEO (esperto , prima della chiusura del tag head) in impostazioni (tuo caso)
Se vuoi che venga applicato ad una sola pagina (non è il tuo caso) lo metti nella Mappa - proprietà - esperto , prima della chiusura del tag head)
Ma non si formatte con il programma !?!? O, come al solito, non ho capito
io ho risposto all'applicazione del codice...
visto che lui era soddisfatto del risultato ottenuto con quello
poi se si possa fare o meno con la sua versione da programma, non ho neppure guardato
Il codice utilizzato qui
http://essedi.altervista.org/_EVO2020/_prove/index.html
definisce:
Non mi risukta che si possa fare direttamente da programma, ma sarei felice di sbagliarmi
Io l'ho inserito in un foglio di stile esterno
http://essedi.altervista.org/_EVO2020/_prove_res/prove.css
Volendo includerlo direttamente nel progetto è sufficiente seguire le indicazioni di Claudio D, racchiudendolo tra i tag <style> e </style>
Riporto di seguito il codice completo di tag <style> e </style>
<style>
/* -- Inizio CSS per hamburger menu */
/* sfondo e bordo */
.hamburger-button {
width: 30px !important;
height: 30px !important;
background-color: #B0E2FF !important;
border: 2px solid #000080 !important;
border-radius: 5px !important;
}
/* barre */
.hamburger-bar {
width: 65% !important;
height: 4px !important; /* non funziona con % */
background-color: #0000CD !important;
}
/* pulsante di chiusura hamburger menu */
.hamburger-menu-close-button {
position: absolute;
right: 0px !important; /* allineato a destra */
margin: 5px !important; /* distanza dal contenitore */
padding: 0px !important; /* margini interni */
background: #FF0000 !important; /* colore dello sfondo */
color: #FFFF00 !important; /* colore del contenuto */
width:28px;
height:28px;
border-radius: 50%; /* forma circolare */
text-align: center !important; /* contenuto centrato */
}
/* -- Fine CSS per hamburger menu */
</style>
@Esse Di non è per polemica ma per capire... Stiamo parlando della versione 2020, stiamo parlando del menù che compare nei cellulari o nello scroll di alcuni siti desktop... Nel tuo esempio, a parte la X di chiusura rossa non vedo nulla che non si possa fare con il programma... Ripeto, potrei aver confuso tutto e non aver capito nulla
Parliamo di questi:
@Patrizia... Danilo ha la v. 16
da parte mia ho solo indicato dove mettere il codice, non ho verificato nessuna delle opzioni per la sua fattibilità con la sua versione...
Con la formattazione standard di X5 EVO 20 io riesco a modificare solo il colore dello sfondo, del bordo e delle barre (icone) dell'Hamburger menu
Può darsi che mi sfugga, ma non vedo come modificare, indipendentemente dai valoru del Menu principlae:
Dalle parole chiave del post di apertura, sembra che Danilo parli della versione x5 pro 2020.1
Patrizia, a titolo di prova ho aggiornato l'Hamburger menu del mio sito di prova, variando ovviamente il mio codice.
Dai un'occhiata e dimmi se con gli strumenti standard di X5 si riuscirebbe ad ottenere lo stesso effetto
si purtroppo è vero...
ma dalle licenze a me risulta come ultima la 16
e sicuramente coi codici si ottiene una personalizzazione maggiore che da programma... che purtroppo è ancora limitato, anche su quel punto lì...
Se il tuo sito prova è quello degli screenshot che ho postato sopra lo vedo uguale a prima, metti il link che faccio una prova, ho comunque capito, forse, quello che intendi quando dici che segue le modifiche del menù principale, io mi riferivo all'aspetto finale che può essere ottenuto con il programma ma, come dici tu, modifica anche il menù principale e viceversa
Cancella la cache
Non so perchè ma non mi pulisce la cache sul cellullare con firefox, comunque l'ho visto con un altro browser e confermo quello che ho scritto sul post precedente, si riesce con il progemma a modificare l'hamburger menù, anche come l'hai fatto sul tuo sito prova, ma modifica anche il menù principale e viceversa quindi, ora ho capito quello che intendevi dire
A me piace imparare cose nuove
Mi fai vedere come si fa?
@Esse Di
Come detto sopra, a parte la X di chiusura, tutto il resto si può fare con il programma, sempre che io abbia capito bene di cosa stiamo parlando:
http://bystratostyle.altervista.org/PROVE/pagina-30.html
Patrizia, mi arrendo per sfinimento
??? Quindi vuol dire che non ho capito ???
No, sono io che non capisco.
Danilo ha chiesto una cosa. Io credo di avergli suggerito una soluzione.
Qual è la tua soluzione?
Il sito che hai mstrato non ha un Menu normale. Credi che è quello che chiedeva danilo?
... misura anomala, ma c'è >> @media (max-width: 1359.9px) and (min-width: 720px)
.
A questo punto sono io che abbandono per sfinimento, sono su questo blog per divertimento ed aiutare ed anche per imparare cose nuove, non amo aggiungere codeice extra quando il programma può fare il lavoro richiesto, non sono una bambina a cui piace fare polemiche
A me piace imparare cose nuove
Mi fai vedere come si fa?
Ho risposto a questa tua domanda postando il mio sito, guardando il tuo esempio sul tuo sito.
Sicuramente non ho capito cosa voleva Danilo... Colpa Mia
scusate se mi reintrometto... ma "forse" converrebbe a questo punto attendere Danilo che è l'interessato
Author
Caspita, non immaginavo di sollevare questo putiferio...
Io ho X5 V16 professional 2020.1 Sia le risposte di Claudio D. che di Esse D. sono pertinenti al mio problema e credo risolutive. Ho scritto "credo" perché devo ancora testarle su un sito che ho in costruzione. Comunque posso dire fin d'ora che il programma (il mio sicuramente, ma credo anche le versioni più recenti) non ha gli strumenti per la formattazione dellì hamburger button, perché è di questo che stiamo parlando, non dell'hamburger menu, sul quale invece si può intervenire in ogni dettaglio. Proprio per questo ho trovato utile e preziosa l'indicazione del codice completo del CSS da utilizzare per agire sull'Hamburger button.
Ringrazio tutti coloro che sono intervenuti, compreso Kolasim, il cui consiglio mi pare però un pò "ermetico"...
@danilo tomasetta Nessun putiferio qui si sta per aiutare ed aiutarsi
, (oltretutto sono un pò dura nel capire) io non ho la 16 per cui non so se ha la possibilità di inserire un'immagine di sfondo per l'hamburger button se si può (come per la 20), per la formattazione del pulsante, a parte:
basta crearsi l'immagine voluta ed inserirla mettendo trasparente colore sfondo e colore icona e togliendo la spunta da Usa le stesse impostazioni della voce menù ripeto, a me non piace utilizzare codice esterno quando si può anche se i siti che creo con WX sono pieni di css esterno per migliorare i loro layout.