italia / design-wordpress-theme-italiaWP2

Tema WordPress open-source per la Pubblica Amministrazione basato su Bootstrap Italia
Other
33 stars 19 forks source link

Menu verticale con più di quattro voci non visualizzato correttamente #33

Open albertomarini opened 2 years ago

albertomarini commented 2 years ago

Buongiorno, sto attualmente utilizzando il menu in verticale creato grazie allo script suggerito da @dmp21-dev nel thread #10. Ho deciso di utilizzare il menu verticale poiché le voci di secondo livello del menu sono molteplici e, con la visualizzazione orizzontale, il testo tende ad andare fuori schermo.

Poiché il numero degli elementi contenuti nel menu è superiore a quattro voci, con lo script mi ritrovo ad avere una superficie bianca alla dx del testo, rendendo impossibile una corretta visualizzazione su desktop. Al contempo, anche il posizionamento degli elementi è sulla estrema sx, invece, che sotto la relativa voce del menu.

Considerate l'estrema varietà dei menu creati da tutti gli utenti che utilizzano questo tema, penso che potrebbe essere ideale creare un meccanismo di toggle attraverso il quale l'utente può scegliere se mostrare il menu totalmente in verticale o in orizzontale.

Allego immagini relative alla problematica di questa issue.

test2 test1 .

albertomarini commented 2 years ago

Per quanto riguarda il menu in verticale, la problematica è stata risolta con il seguente codice css:

/ menu in verticale / .navbar .dropdown-menu.show { display: list-item; } .navbar .dropdown-menu .menu-item h5 a { font-weight: 700; text-transform: uppercase; font-size: 0.7em; }

delavex76 commented 8 months ago

Io ho risolto modificando il file /htdocs/wp-content/themes/italiawp2/inc/scripts.js Non si capisce perché il template debba attivare megamenu quando si inserirscono più di 3 items.....mah. Comunque basta modificare il codice intorno alla linea 139:

if(ul.children().length < 4) { if (((i + 1) > (numLi / 2)) && (posiLi > largWi)) { $(this).find("ul.dropdown-menu").addClass("drodownmenu-on-right"); } }else{ $(this).addClass('megamenu'); }

cambiando il valore dell' ul.children().length < 4 in ul.children().length < 50 ad esempio il megamenu non si attiverà fino a 49 items