WebSite X5Help Center

 
danilo tomasetta
danilo tomasetta
User

Come formattare l'hamburger button  it

Autore: danilo tomasetta
Visite 1371, Followers 2, Condiviso 0  

Chiedo scusa alla comunità per una domanda così apparentemente banale, ma oggi mi sono imbattuto mentre costruivo un nuovo sito nel problema di formattare l'hamburger button. Intendo il pulsante quadrato che fa comparire l'hamburger menu. Ho letto la guida on line, nella quale a quanto ho capito si dice che lo stile dell'hamburger button dipende dallo stile assegnato ai pulsanti nelle impostazioni generali, ma nonostante svariati tentativi il maledetto bottone continuava a presentarsi in modo non conforme alle mie aspettative. Io ho bisogno di assegnargli un colore di sfondo e un colore alle 3 linee orizzontali. Inoltre è possibile determinare le dimensioni di questo bottone o vengono assegnate di default dal programma ?

ringrazio fin d'ora chi riuscirà a mettermi sulla strada giusta

Postato il
9 RISPOSTE
Mirko Boschetti
Mirko Boschetti
Moderator

il colore delle linee lo prende dal colore del testo dei menu....l'altezza basta allargare i margini  verticali  dei menu... e lo sfondo lo prende dal colore dello sfondo dei menu... ovviamente parlo di quelli desktop... wink

Leggi di più
Postato il da Mirko Boschetti
danilo tomasetta
danilo tomasetta
User
Autore

Ringrazio entrambi, ma in particolare Esse Di, che mi ha linkato una discussione dove è inserito anche un codice CSS che riguarda lo stile dell'hamburger button. A questo proposito ti chiedo se potresti spingerti ad arricchire questo codice anche con i parametri che riguardano, oltre alle dimensioni del pulsante e delle barre interne, anche il colore delle sfondo, il colore delle barre ed eventualmente colore e spessore di una linea di contorno.

Ai tecnici incomedia suggerirei invece di agevolare la formattazione dell'Hamburger button inserendo un menu di formattazione contestuale che ne determini lo stile a prescindere dai colori e dalle dimensioni usati per il menu principale e dallo stile impostato per altri pulsanti. A me sembra davvero poco logico vincolare lo stile dell'hamburger button allo stile del menu principale...

Leggi di più
Postato il da danilo tomasetta
Esse Di
Esse Di
User

Con questo codice regoli anche il colore dello sfondo e delle barre

<style>
.hamburger-button {
width: 30px !important;
height: 30px !important;
background-color: #FF0000 !important; // rosso
}

.hamburger-bar {
width: 65%;
height: 10% !important;
background-color: #FFFF00 !important; // giallo
}
</style>

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User

Mi sono accorto che il codice funziona solo in anteprima e con Chrome. In FF e Edge non visualizza le barre.

Inoltre contiene un errore nei commenti. A posto di // rosso e // giallo occorre scrivere /* rosso */ e /* giallo */

Leggi di più
Postato il da Esse Di
Esse Di
Esse Di
User

Oltre alla correzione dei commenti (che possono anche semplicemente essere eliminati), occorre sostituire height: 10% con height: 5px.

In questo modo dovrebbe funzionare. Quando sarò di nuovo davanti al PC farò prove più approfondite 

Leggi di più
Postato il da Esse Di
danilo tomasetta
danilo tomasetta
User
Autore

Grazie per ora. Intanto farò anch'io qualche smanettamento smile

Leggi di più
Postato il da danilo tomasetta
Esse Di
Esse Di
User

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>

Leggi di più
Postato il da Esse Di
danilo tomasetta
danilo tomasetta
User
Autore

Grande Esse Di e complimenti !

Leggi di più
Postato il da danilo tomasetta