Personalizzazione colori menu di livello in hamburger 
Автор: Michele M.
Просмотрено 128,
Подписчики 2,
Размещенный 0
Buongiorno a tutti.
Il menu di livello del menu standard è personalizzabile tramite apposita sezione; vorrei applicare le stesse impostazioni al menu di livello che si apre tramite il menu hamburger, perché assume gli stessi colori della voce principale e la sola gestione delle linee di separazione non risolve bene la confusione che si crea.
Sto provando in ogni modo ma proprio non riesco a trovare una soluzione. E' possibile?
Grazie.
Размещено
... se posti il tuo LINK non si va nell'aleatorio...
... se vuoi far da te, tra gli altri Topic, puoi prendere spunto anche da qui:
https://helpcenter.websitex5.com/ru/post/273582
.
ciao
.
Автор
Ciao KolAsim, grazie per la risposta e scusami, in effetti ho dimenticato di mettere il link, eccolo:
https://www.michelemenniti.altervista.org/HV/
Naturalmente bisogna entrare in modalità sticky/hamburger per vedere l'effetto.
Comunque ho letto il Topic che mi hai indicato e l'ultima soluzione è esattamente ciò che mi serviva, il codice:
<style>
.menu-mobile-animated ul * {background-color:yellow !important;color:brown !important}
.hamburger-button{background-color:lavender !important}
.screen-reader-only{position:relative !important}
</style>
è perfetto, mi basterà modificare i due colori per adeguarli a quelli del sito. L'ho già inserito nel progetto e l'ho verificato in anteprima, ma non lo pubblico finché non mi dai riscontro, in modo da farti vedere la situazione attuale.
Mi chiedo come mai gli sviluppatori non integrino una voce specifica, penso che sia un problema comune a molti.
Sempre dopo la tua risposta chiudo il Topic come risolto. Grazie sempre per la tua grande disponibilità.
Автор
Una sola nota, il comportamento delle freccette non sembra rispettare le forme. Cioè quando le covi principali sono chiuse hanno la freccetta verso il basso, cliccando su di essa o sulla voce si apre correttamente il menu di livello, e a quel punto la freccetta va verso l'alto. Io mi aspetterei che cliccando nuovamente il livello si chiudesse, invece si apre una doppia freccia che però non funziona; il livello si chiude semplicemente uscendo dall'area. Non è un grande problema, ma io a questo punto preferirei che comparisse solo la freccetta verso il basso, in modo da identificare subito le voci di menu con un sottolivello, e una volta aperto, la freccetta potrebbe scomparire proprio, per riapparire una volta che mi sposto su un'altra voce del menu principale. Se si può fare, altrimenti va comunque bene così. Grazie ancora.
... su questo non ci ho perso tempo perchè nei miei livelli il colore si differenzia, ma non sono stato a vedere le opzioni che ho in atto; ... con calma puoi passarti il tempo a provarle tutte; invece con il codice EXTRA è immediato, "tagli la testa al toro", e senza stress...
...
... per il resto, bravo! ... hai interpretato correttamente...
... il codice è innocuo, e lo puoi mettere e togliere e personalizzare nei colori senza problemi...
... come puoi notare dal mio STAMP, nel mio codice ho aggiunto la visualizzazione delle frecce associate ai livelli, in modo che si distinguano facilmente dalle voci non di livello, senza dover cliccare come adesso per dover scoprire che si tratta di un livello...
... se ti servissero altri suggerimenti o chiarimenti, avvisami ... ciao...
.
Автор
Mi è tutto chiaro, ho modificato i colori e ho pubblicato; ho lasciato le frecce per farti vedere l'effetto che ora ti spiego (in visualizzazione da cellulare): se clicchi su una freccia si apre il livello, se ora provi a cliccare sulla freccia ^ vedrai che non sortisce alcun effetto (in realtà appare una minuscola doppia freccia disattiva) mentre invece lascerebbe intendere che cliccando si dovrebbe chiudere il livello. In ogni caso sarebbero utili solo nel menu hamburger, invece si vedono anche nel menu standard e li non stanno troppo bene, quindi, non potendo gestirle a piacimento, le toglierò. Comunque il vero problema è stato risolto, grazie a te.
Il programma non dà modo di intervenire sui colori del menu di livello hamburger, ne sono sicuro, il tuo codice è semplice, potente e risolutivo, secondo me potrebbero integrarlo nel WS PRO e dare la possibilità a tutti di modificare dalla sezione "modello".
P.S. Grazie per i complimenti, ma non sono meritati
; qui l'unico bravo, anzi bravissimo sei tu, io sono solo stato capace di seguire le tue istruzioni, chiare come sempre.
... dipende dal motore del programma, per poterlo controllare in altro modo si dovrebbe cambiare approccio e procedere via script...
... ho visto online, il tuo menu è venuto bene...
... se non vuoi vedere le frecce nè su nè giù in modo semplice prova con questa variante, poi i colori te li personalizzi tu:
<style>
.imLevel *{background-color:blue !important}
.menu-mobile-animated ul *{background-color:lavender !important;color:brown !important}
</style>
.
ciao
.
...!... attenzione ...!...
... i commenti che hai usato in HEAD creano errore:
/* codice per settare i colori del menu di livello in modalità hamburger */ /* codice per impostare il colore del player audio */
/* commento che deve stare dentro al tag STYLE o al tag SCRIPT */ (quindi non al di fuori dei tag)!
// commento che può stare nel tag SCRIPT ma NON nel tag STYLE;
<!-- commento che può stare al di fuori dei TAG liberamente nella pagina html, non verrà letto in runtime -->
.
ciao
.
Автор
Buongiorno,
grazie per la segnalazione degli errori, li ho sistemati, anche se ora ho pubblicato la nuova versione per testarla, poi sistemerò i colori. Mi servirebbe un'unica aggiunta, se possibile: il cambio di colore sul "passaggio del mouse" nel menu di livello, almeno del testo, se possibile anche dello sfondo.
Si può fare?
... OK... ...con questa variante, facilmente personalizzabile, ottieni la freccia fluttuante ed il cambio colore del testo al rollover:
<style>
.imLevel *{background-color: #002d7b !important}
.menu-mobile-animated ul *{background-color: #d2deed !important;color: #253a58 !important}
.imLevel *:hover{color:red !important}
.imLevel .label-wrapper:not(.imPage .label-wrapper):hover::before {content: "▼";position: absolute;bottom: 5px;right:0px;color:yellow}
</style>
.................
ciao
.
Автор
Questo nuovo codice è perfetto, perché mi permette di lasciare il menu principale inalterato e di operare solo col menu di livello hamburger, esattamente quello che cercavo. Grazie davvero per la pazienza che ti sei preso nell'aiutarmi!
... ho controllato online, hai interpretato correttamente, e non sono più segnalati errori nel sorgente...
.
ciao
.
... ti faccio vedere una chicca curiosa, esclusiva ed unica, che potrebbe interessarti, e nel caso ci risentiremo altrove quando sarai leggermente più esperto, ma neanche più di tanto...
.
ciao
.
Автор
Grazie, ho provato a capire cosa fosse l'ultima immagine che hai postato, si tratta del player audio? Immagino che sarai intervenuto localmente sul sorgente della pagina, davvero non è cosa per me
In realtà lì avrei un altro problemino grafico da risolvere: in pratica se aumento troppo l'intensità dello sfondo del player il testo si schiarisce, perché l'effetto è sovrapposto e non agisce direttamente sullo sfondo. Se non riuscirò a risolverlo nei prossimi giorni, magari apro un altro Topic.
... al paginatore è accoppiata una finestra apre/chiude che riporta la mappa generale del sito con tutte le voci del menu, diciamo un doppione del menu ma con tutte le voci estese facilmente consultabile in un colpo solo senza troppi click...
... questo oggetto EXTRA non è invasivo, si apre o chiude al click su un'icona minimale in alto a destra...
... se un domani dovesse interessarti, fatti sentire...
.
ciao e buona continuazione...
.
Автор
Sei un genio! Probabilmente ci risentiamo tra qualche giorno, se non risolvo l'altro problema. Grazie davvero di tutto l'aiuto che mi hai dato!