WebSite X5Help Center

 
danilo tomasetta
danilo tomasetta
User

Formattazione dell'hamburger button  it

Author: danilo tomasetta
Visited 1858, Followers 2, Shared 0  

Circa 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

Posted on the
24 ANSWERS - 1 USEFUL
Claudio D.
Claudio D.
Moderator
Best User of the month IT

in quale cartella ? surprised

Esistono in website delle  sezioni apposite per inserire i codici extra... 

Scusa ma come l'avevi provato allora quel codice ? wink

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)

Read more
Posted on the from Claudio D.
Fabio C.
Fabio C.
User

Ma non si formatte con il programma !?!? O, come al solito, non ho capito embarassed

Read more
Posted on the from Fabio C.
Claudio D.
Claudio D.
Moderator
Best User of the month IT
Patrizia B.
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 wink

poi se si possa fare o meno con la sua versione da programma, non ho neppure guardato cool

Read more
Posted on the from Claudio D.
Esse Di
Esse Di
User
Patrizia B.
Ma non si formatte con il programma !?!? O, come al solito, non ho capito

Il codice utilizzato qui

http://essedi.altervista.org/_EVO2020/_prove/index.html

definisce:

  • bordi, arrotondamendi e sfondo dell'hamburger button
  • dimensioni e colore delle barre
  • immagine e posizione del tasto di chiusura

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>

Read more
Posted on the from Esse Di
Fabio C.
Fabio C.
User

@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 tongue-out

Read more
Posted on the from Fabio C.
Fabio C.
Fabio C.
User

Parliamo di questi:

Read more
Posted on the from Fabio C.
Claudio D.
Claudio D.
Moderator
Best User of the month IT
Patrizia B.
 Stiamo parlando della versione 2020,...... Ripeto, potrei aver confuso tutto e non aver capito nulla

@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...

Read more
Posted on the from Claudio D.
Esse Di
Esse Di
User
Patrizia B.
Parliamo di questi:


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:

  • rapporto dimensioni: più lungo che largo o viceversa
  • dimensioni e smusso (arrotondamento) del bordo
  • dimensioni delle barre interne
Read more
Posted on the from Esse Di
Esse Di
Esse Di
User
Claudio D.
@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...

Dalle parole chiave del post di apertura, sembra che Danilo parli della versione x5 pro 2020.1

Read more
Posted on the from Esse Di
Esse Di
Esse Di
User

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

Read more
Posted on the from Esse Di
Claudio D.
Claudio D.
Moderator
Best User of the month IT
Esse Di
Dalle parole chiave del post di apertura, sembra che Danilo parli della versione x5 pro 2020.1

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ì...

Read more
Posted on the from Claudio D.
Fabio C.
Fabio C.
User
Esse Di
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

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 wink

Read more
Posted on the from Fabio C.
Esse Di
Esse Di
User
Patrizia B.
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

Read more
Posted on the from Esse Di
Fabio C.
Fabio C.
User

 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 diretongue-out

Read more
Posted on the from Fabio C.
Esse Di
Esse Di
User
Patrizia B.
... 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

A me piace imparare cose nuove

Mi fai vedere come si fa?

Read more
Posted on the from Esse Di
Esse Di
Esse Di
User

Patrizia, mi arrendo per sfinimento

Read more
Posted on the from Esse Di
Fabio C.
Fabio C.
User
Esse Di
Patrizia, mi arrendo per sfinimento

??? Quindi vuol dire che non ho capito ???

Read more
Posted on the from Fabio C.
Esse Di
Esse Di
User

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?

Read more
Posted on the from Esse Di
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT
Esse Di
... ... ...  Il sito che hai mostrato non ha un Menu normale. ... ... ... 

... misura anomala, ma  c'è  >> @media (max-width: 1359.9px) and (min-width: 720px)

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Fabio C.
Fabio C.
User
Esse Di
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?

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

Esse Di
Patrizia B. ... 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

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 wink

Read more
Posted on the from Fabio C.
Claudio D.
Claudio D.
Moderator
Best User of the month IT

scusate se mi reintrometto... ma "forse" converrebbe a questo punto attendere Danilo che è l'interessato wink

Read more
Posted on the from Claudio D.
danilo tomasetta
danilo tomasetta
User
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"...

Read more
Posted on the from danilo tomasetta
Fabio C.
Fabio C.
User
danilo tomasetta
Caspita, non immaginavo di sollevare questo putiferio...
Esse Di
Il codice utilizzato qui http://essedi.altervista.org/_EVO2020/_prove/index.html definisce: bordi, arrotondamendi e sfondo dell'hamburger button dimensioni e colore delle barre immagine e posizione del tasto di chiusura Non mi risukta che si possa fare direttamente da programma, ma sarei felice di sbagliarmi

@danilo tomasetta Nessun putiferio qui si sta per aiutare ed aiutarsi wink, (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:

  • immagine e posizione del tasto di chiusura

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.

Read more
Posted on the from Fabio C.