Submenu in versione mobile solo CSS

[KillerWorm]

Ottimo, ho effettuato l'accesso e per il momento ho giusto dato uno sguardo.

Dovrei avere tutto il necessario per i vari eventuali test.
Ti aggiorno prossimamente su questa discussione per quanto riguarda la questione in oggetto.

[KillerWorm]

Ho elaborato una prima possibile soluzione ma bisogna fare qualche precisazione tecnica... non è semplice spiegarlo ma ci provo.

Per ottenere un effetto "slide", sulle dimensioni di un elemento, col solo CSS si potrebbero avere delle limitazione che andrebbero aggirate in qualche modo.

Prendo questa tua richiesta, postata dopo che hai fatto le tue constatazioni riguardo il metodo slideToggle():

Se così fosse vorrei poter aprire anche il submenu con un semplice toggle da gestire poi via CSS...

A parte applicare la classe con il toggle (che è la cosa minima) bisogna tenere presente che la transizione CSS agisce sul valore numerico di una data proprietà. La transizione infatti calcola i valori intermedi tra due valori fissi (di inizio e fine) per poi applicarli gradualmente nel tempo stabilito.

Per l'effetto che vuoi ottenere dovrebbe essere eseguita una transizione per l'altezza dell'elemento <ul>, in modo che questo si estenda partendo da 0 all'altezza totale dei suoi contenuti.

Il problema sta nel fatto che, quando l'elemento è aperto, la proprietà height ha un valore "auto" (per forza di cose), quindi non numerico.
Se questa proprietà è data in pasto alla transizione, avremmo 0 come valore iniziale (elemento chiuso) e "auto" come valore finale (come è normale che sia per tale elemento). Il motore CSS quindi non potrà calcolare dei valori intermedi tra "0" e "auto". Se si usasse questa proprietà per la transizione, si otterrebbe semplicemente uno "scatto" dal valore 0 ad un valore X (cioè il valore che si avrebbe con l'elemento aperto).

Il metodo slideToggle(), al contrario, fa i suoi calcoli preventivamente per ottenere un valore numerico di inizio e fine transizione. In sostanza estende preventivamente l'elemento (in maniera non visibile) per ottenere il valore finale (in pixel) della proprietà height, che userà per calcolare i valori intermedi da applicare durante l'animazione.

A questo punto, per usare la soluzione CSS, va adoperata una strategia adeguata.

Una soluzione può essere quella di calcolare il valore finale sempre attraverso JavaScript, quindi applicarlo per fare in modo che la transizione (impostata comunque tramite CSS) possa avere effetto tra i due valori fissi, iniziale e finale.
Questo richiede un po' di JavaScript che agirebbe comunque giusto appena prima di eseguire la transizione, e non per crearla completamente via script.

Un'alternativa può essere quella di usare la proprietà max-height. Questa proprietà può essere impostata a 0 (valore iniziale, per ottenere l'elemento chiuso) e ad un valore sufficientemente alto (valore finale, per ottenere l'elemento aperto) per il quale si suppone che tale elemento non ecceda.

In questo modo la transizione agisce su max-height che comunque influisce sull'altezza stessa dell'elemento.

Quest'ultima "tecnica" è quella che ho usato per elaborare una soluzione che ti posto.

Qui il JavaScript:

$(".header__menu .menu-item-has-children > a").click(function(e) { 
    e.stopPropagation();
    e.preventDefault();
    var submenu = $(this).next('.sub-menu');
    submenu.toggleClass('show-submenu');
});

Sostanzialmente è quello proposto dal tuo amico chatGPT ma ho rimosso la funzione isMobile() e relativa condizione perché, benché la classe sia applicata anche per desktop, vado a gestirla attraverso la mediaquery nel CSS.

Qui il CSS:

@media (max-width: 920px){
  .header__menu .menu-item .sub-menu {
    display: block;
    max-height: 50em;
    opacity: 1;
    overflow: hidden;
    transition: .4s ease-in-out;
  }
  .header__menu .menu-item .sub-menu:not(.show-submenu) {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

Volendo, giusto per una questione di pulizia, queste due regole CSS potresti inserirle assieme alle eventuali altre nella relativa mediaquery che già disponi sul tuo CSS. Altrimenti inserisci, come CSS personalizzato, l'intero blocco preso così com'è. Vedi tu come meglio preferisci.

Chiaramente dovrai rimuovere l'eventuale JavaScript che hai applicato in precedenza per ottenere lo slideToggle(), altrimenti potrebbe interferire, oltre che risultare inutile.

Prova e fai sapere.
Per eventuali chiarimenti puoi proseguire sempre qui.

Nel caso vada bene questa soluzione, puoi chiaramente rimuovere il nuovo profilo utente che hai creato per farmi accedere al tuo WP

[ivanisevic82]

Killer, la soluzione che hai proposto funziona perfettamente.

Ti chiedo solo un paio di chiarimenti, oltre ad una possibile integrazione/modifica.

I chiarimenti, che domando anche per finalità "didattiche", riguardo l'utilizzo del "not", che non conoscevo e non avevo mai visto:

.sub-menu:not(.show-submenu)

Inoltre volevo capire meglio il funzionamento del valore 50em, alla voce max-height.

So che "em" è una valore relativa, la cui entità dipende in qualche modo da altri elementi.
In questo caso il "50" a cosa va rapportato?

Infine, riguardo alla modifica, ho pensato che siccome la voce sulla quale abbiamo impostato il clic è anche il link per l'accesso ad una specifica pagina del sito, potrebbe essere più coerente lasciare la voce normalmente cliccabile e "spostare" il comando per l'apertura del sub-menu su una freccetta posizionata sulla destra (ad una ventina di px dal margine), da cliccare per fare aprire e chiudere il menu.

Non potendo intervenire direttamente sul menu, rispolverando alcuni tuoi insegnamenti di alcuni mesi fa, credo di dover aggiungere una pseudoclasse "after", per simulare in qualche modo l'aggiunta di un elemento.

E' un approccio corretto?

Ovviamente, anche nel caso lo fosse, da qui a riuscire a realizzarlo ce ne passa...

[KillerWorm]

Bene, ti anticipo che hai chiesto 3 cose che vanno oltre la semplice spiegazione per poter essere capite in modo adeguato.
Non so se riuscirò a farmi capire


- Perché ho usato il :not()

riguardo l'utilizzo del "not"

L'ho adoperato principalmente per una questione di ordine logico e di ottimizzazione.

Ho voluto impostare la prima regola per definire (come priorità) l'elemento normalmente aperto (di fatto lo sarebbe se non ci fosse alcun CSS a renderlo chiuso).
Per logica, abbiamo quindi questa regola di base:

.header__menu .menu-item .sub-menu {
  display: block;
  max-height: 50em;
  opacity: 1;
  overflow: hidden;
  transition: .4s ease-in-out;
}

Nota che qui sono definite sia le proprietà di base (display, overflow, transition), le quali manterranno lo stesso valore quando l'elemento viene chiuso, sia quelle proprietà che dovranno cambiare valore (max-height, opacity)

La seconda regola invece definisce l'elemento chiuso. Tecnicamente si sarebbe potuta "inventare" una classe con nome "hide-submenu" da applicare per definire l'elemento chiuso, in tal caso non ci sarebbe stato bisogno del :not().
Avendo però usato "show-submenu", per forza di logica è stato necessario applicare il :not() così da ottenere lo scopo voluto. Questo non fa altro che considerare l'elemento quando NON ha una specifica caratteristica; in questo caso è considerato .sub-menu quando NON ha classe .show-submenu.

In sostanza, questa seconda regola definisce l'elemento chiuso:

.header__menu .menu-item .sub-menu:not(.show-submenu) {
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

Nota che qui sono definite le proprietà di cui vogliamo far "transitare" il valore (passami il termine). Ci sono sia quelle definite nella regola di base (max-height, opacity), sia altre il cui valore è già definito altrove (margin, padding-top, padding-bottom) oppure che posseggono un valore di default (visibility). Per cui la transizione avverrà tra i valori già esistenti e questi altri definiti qui.

Ora, certamente si potrebbe usare una priorità inversa, quindi definire l'elemento chiuso come regola di base.
In questo modo si avrà qualcosa del genere:

.header__menu .menu-item .sub-menu {
  display: block;
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: .4s ease-in-out;
}

Abbiamo quindi definito le proprietà di base che manterranno il loro valore (display, overflow, transition) e quelle col valore da "transitare" (visibility, max-height, opacity, margin, padding-top, padding-bottom)

Ora arriva il dunque.

Per la seconda regola (che definirebbe l'elemento aperto) dovremmo in questo caso applicare il valore finale di quelle proprietà da "transitare".

Quindi:

- per max-height possiamo mettere 50em (questo poi lo vediamo dopo);
- per opacity mettiamo 1;
- per margin non sapiamo che valore era stato impostato altrove, per cui è necessario andare a cercarlo e reimpostarlo in questa regola altrimenti resterebbe 0 (valore che abbiamo impostato come base)
- stessa cosa per padding-top definito altrove
- e uguale per padding-bottom definito altrove
- per visibility dobbiamo impostare visible (cioè il valore di default per questa proprietà)

Alla fine dei conti, e di qualche grattacapo per reperire i valori mancanti, avremmo questa regola:

.header__menu .menu-item .sub-menu.show-submenu {
  max-height: 50em;
  opacity: 1;
  visibility: visible;
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
}

Puoi notare che in questo caso sarà necessario impostare "visibility:visible" mentre non è necessario nel caso col :not() perché, considerando che andrebbe impostato nella regola di base, avrà comunque il valore "visible" come default.

Allo stesso modo, nel caso col :not(), non è necessario preoccuparsi dei valori di quelle proprietà definite da altre parti, perché queste proprietà avranno già tali valori nella regola di base senza necessariamente definirli.

Viceversa, azzerando quei valori nella regola di base, sarà necessario ridefinirli nella seconda regola per poterli usare come valori finali della transizione.

Alla fine dei conti quel semplice :not() mi fa risparmiare queste 4 righe:

visibility: visible;
margin-top: 5px;
padding-top: 10px;
padding-bottom: 10px;

Righe che sarebbero comunque ridondanti perché già definite come default o da qualche altre parte nel css "originale".


- Perchè ho usato em e da dove salta fuori quel 50

volevo capire meglio il funzionamento del valore 50em

L'unità di misura "em" si basa sul valore in pixel del font-size che risulta applicato per l'elemento specifico. Consiglio di consultare qualche documentazione per maggiori dettagli.

Come anticipato, in questo caso non è possibile applicare una transizione per la proprietà height, avendo questa un valore auto.
Si può invece sfruttare max-height che sostanzialmente determina un limite il quale sarà rispettato di conseguenza da height. Agendo quindi su tale proprietà, l'altezza potrà variare con la transizione anche se in modo indiretto.

Ma max-height determina soltanto un valore di limite massimo. Quanto dovrà essere questo valore massimo per poter far stare quell'elemento al suo interno?

Questo non possiamo saperlo in modo preciso. Potresti voler aggiungere altri sottomenu con più o meno voci o potresti voler aggiungere o rimuovere delle voci da quel sottomenu come e quando ti pare. Quindi si può giusto ipotizzare un valore X da considerare come valore massimo che pensi non sia superato... insomma, quel sottomenu ha attualmente 9 voci, potrebbe arrivare a 10 o 15 ma già 20 mi sembrano troppe.

Tu domanderai: beh, allora perché non mettere un valore abbastanza alto, tipo 99999px, per andare sul sicuro?
e io risponderò: certamente puoi farlo, ma considera che la transizione andrà da 0 a quel valore nel tempo specificato. Quindi, maggiore sarà il valore limite, più rapida risulterà l'animazione che subisce (di conseguenza) l'altezza di tale elemento, perché sfrutterà solo una minima parte di quel valore limite così alto.

Bisogna quindi trovare un giusto compromesso: un valore non troppo "stretto" (per evitare che il contenuto sbordi se le righe dovessero essere di più) e non troppo "largo" (per poter ottenere un effetto adeguato della transizione).

Attualmente ci sono 9 voci alte circa 32px ciascuna per un totale di 288px.
Se fossero 20 voci (come ipotesi di valore massimo), l'altezza totale sarebbe 640px.

Diciamo che potremmo quindi considerare circa 650px per tenerci larghi e avere un effetto di transizione abbastanza equilibrato.

A questo punto si potrebbe impostare tale valore in px.
Però, l'altezza delle singole righe/voci del menu, potrebbe variare principalemnte in funzione della dimensione del font. Se per qualche motivo di design viene cambiato il valore di font-size, aumentandolo o riducendolo, allora quel valore di 650px potrebbe risultare inadeguato, perché troppo basso o troppo alto rispeto all'ipotesi massima di quelle 20 righe.

In questo caso può essere più appropriato basare quel valore sulla dimensione del font così da permettere una maggiore elasticità.

Attualmente il font-size del testo di quei menu è 13px, che corrisponde al valore di 1em.

Arrivando al dunque:
in quel contesto 50em sono uguali a 50 x 13px, quindi corrispondono a 650px.

Se per qualche motivo quel font-size fosse portato, ad esempio, a 15px, l'altezza della riga sarà di 35.4px (considerando altezza del testo + padding), per cui il valore di ipotesi massima per 20 righe risulterà di 708px (20 x 35.4px). In questo caso saremmo ben fuori dal limite di 650px, a meno che questo limite non sia appunto in funzione del font-size, per cui risulterebbe un valore di 750px (50 x 15px) nel quale, per l'ipotesi massima di 20 righe, ci stiamo dentro alla grande.


- Riguardo gli pseudo-elementi cliccabili

credo di dover aggiungere una pseudoclasse "after"

La questione non è così semplice come potrebbe sembrare. Tecnicamente non è possibile definire alcun evento per uno pseudo-elemento, perché questo non esiste fisicamente nel DOM. L'azione del click su un dato elemento si protrae allo stesso modo sugli eventuali suoi pseudo-elementi.

Direi che non puoi risolvere via CSS.

Non potendo intervenire direttamente sul menu

Perché no?
Se intervieni via JavaScript, sarà "relativamente semplice" aggiungere al volo un ulteriore elemento dentro quella voce menu, in modo da creare la funzionalità di apertura del relativo sub-menu.

Non garantisco nulla ma appena possibile posso vedere come potresti procedere.

Per il momento è tutto

[ivanisevic82]

Killer, grazie mille per le meravigliose spiegazioni.

Riguardo all' "em" sei stato assolutamente esaustivo.

Riguardo al "not", anche se la questione era più complessa, penso di aver afferrato la sostanza.

Mi è rimasto un dubbio su questa parte di codice:

.header__menu .menu-item .sub-menu:not(.show-submenu) {   
visibility: hidden;   
max-height: 0;   
opacity: 0;   
margin: 0;   
padding-top: 0;   
padding-bottom: 0; 
}

Sarebbe stato possibile sostituire il tutto con un semplice:

.header__menu .menu-item .sub-menu:not(.show-submenu) {   
display: none;
}

?

Sicuramente ci sarà qualche ragione che mi sfugge.

Riguardo alla questione della pseudo-classe, l'avevo fatta troppo semplice...

Infatti non ho avuto difficoltà ad aggiungere un triangolino (al momento di prova, esteticamente del tutto casuale), con questo codice CSS:

.menu-item-has-children::after {content:" "; 
position: absolute; 
right: 15px; 
top:10px; 
width: 0; 
height: 0; 
border-bottom-width: 8px; 
border-bottom-style: solid; 
border-bottom-color: transparent; 
border-top-width: 8px; 
border-top-style: solid; 
border-top-color: transparent; 
border-left-width: 8px; 
border-left-style: solid; 
border-left-color: #FF3399; 
}

Tuttavia la parte JS, che ho modificato così, non funziona:

$(".header__menu .menu-item-has-children::after").click(function(e) {     e.stopPropagation();
    e.preventDefault();
    var submenu = $(this).next('.sub-menu');
    submenu.toggleClass('show-submenu');
});

Temevo di aver scritto male il codice JS, ma se ho capito bene semplicemente non può funzionare per la pseudo-classe funziona in CSS ma non in JS.

A questo punto, se ho capito bene, l'unica soluzione dovrebbe essere quella di aggiungere un elemento dopo ".menu-item-has-children" mediante JS (chiaramente non posso farlo usando html perché il codice nel caso di specie è gestito direttamente da wordpress via PHP).

Qui però si fermano le mie capacità, perché non so come si aggiunga un elemento in JS...

EDIT: il mio "amico" chatGpt mi ha suggerito l'utilizzo di questo codice JS:

var menuItems = $(".menu-item-has-children");

menuItems.each(function() {
  var spanElement = $("<span>", { class: "menu-item-after" });


  $(this).find("a").after(spanElement);
});


$(".header__menu").on("click", ".menu-item-after", function(e) {
  e.stopPropagation();
  e.preventDefault();
  var submenu = $(this).prev('.sub-menu');
  submenu.toggleClass('show-submenu');
});

Usando questo CSS l'elemento SPAN viene visualizzato regolarmente:

.menu-item-after {
content:" "; 
position: absolute; 
right: 15px; 
top:10px; 
width: 0; 
height: 0; 
border-bottom-width: 8px; 
border-bottom-style: solid; 
border-bottom-color: transparent; 
border-top-width: 8px; 
border-top-style: solid; 
border-top-color: transparent; 
border-left-width: 8px; 
border-left-style: solid; 
border-left-color: #FF3399; 
}

Tuttavia l'evento click non funziona: clicco sul triangolino e non succede niente...

[KillerWorm]

Sarebbe stato possibile sostituire il tutto con un semplice:
...
display: none;

Certo, ma in tal caso non si otterrebbe l'effetto slide, cioè l'animazione dell'altezza che si estende gradualmente nel tempo stabilito, ma avverrebbe un semplice scatto da chiuso ad aperto.

Se non ti interessa avere l'effetto slide, certamente un semplice display:none, come hai scritto, sarebbe più che sufficiente

Temevo di aver scritto male il codice JS, ma se ho capito bene semplicemente non può funzionare per la pseudo-classe funziona in CSS ma non in JS.

"pseudo-elemento"
Come dici, uno pseudo-elemento non è manipolabile via JavaScript perché non fa parte del DOM.

Qui però si fermano le mie capacità, perché non so come si aggiunga un elemento in JS...

Appena posso, provo a formulare qualcosa. Ti invito nel mentre a fare qualche ricerca e provare comunque da te

[ivanisevic82]

Appena posso, provo a formulare qualcosa. Ti invito nel mentre a fare qualche ricerca e provare comunque da te

Certo, una prova l’ho fatta e la trovi nel precedente mio post che avevo editato, probabilmente hai risposto prima di vederla.

grazie!

[KillerWorm]

Già, non avevo visto il tuo EDIT

Prova ad inserire qualche console.log() per verificare se viene chiamata la funzione definita per il click e se gli elementi sono selezionati correttamente.

Più tardi gli do uno sguardo meglio anche io.

[KillerWorm]

Ho elaborato una possibile soluzione; è stato però necessario rivedere un po' di cose. La funzionalità di apertura è ora gestita solo dal relativo pulsante, quindi è necessario rimuovere la precedente parte di script in cui applicavi l'apertura attraverso il click sul link della voce menu.

Ho rivisto anche il CSS già presente e aggiunto quello per definire il pulsante.

Qui una soluzione completa:

<script>
$('.header__menu .menu-item-has-children > a').each(function() {
  $(this).append('<span class="btn-show-submenu">');
});
$('.header__menu').on('click', '.btn-show-submenu', function(e) {
  e.stopPropagation();
  e.preventDefault();
  $(this).closest('.menu-item').toggleClass('submenu-open');
});
</script>
<style>
@media (max-width: 920px){

  /* Link voce menu */

  .header__menu .menu-item a {
    position: relative;
  }

  /* Pulsante mostra sotto-menu */

  .header__menu .menu-item .btn-show-submenu {
    display: flex;
    align-items: center;
    justify-content: center;  
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    color: #0008;
    font-size: 28px;
  }
  .header__menu .menu-item .btn-show-submenu::before {
    content: '';
    display: block;
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background: #000;
    opacity: .05;
    transition: .2s;
  }
  .header__menu .menu-item .btn-show-submenu:hover::before {
    transition: 0s;
    opacity: .1;
  }
  .header__menu .menu-item .btn-show-submenu::after {
    position: absolute;
    content:"˅";
    transform: scaleY(.4);
  }
  .header__menu .menu-item.submenu-open .btn-show-submenu::after {
    content:"˄";
  }

  /* Sotto-menu, animazione apertura chiusura */

  .header__menu .menu-item .sub-menu {
    display: block;
    max-height: 50em;
    opacity: 1;
    overflow: hidden;
    transition: .4s ease-in-out;
  }
  .header__menu .menu-item:not(.submenu-open) .sub-menu {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>

Chiaramente devi inserirla correttamente nel tuo progetto, facendo attenzione di rimuovere le relative parti applicate precedentemente, così da evitare eventuali interferenze.

Per ora non mi dilungo su quanto ho fatto. Verifica che funzioni e prova tu stesso a capirne il funzionamento.
Qualora non riuscissi a capire qualche particolare tecnico ti invito a fare sempre e comunque delle opportune ricerche prima di chiedermi chiarimenti, altrimenti mi impegnerebbe troppo dover spiegare certi concetti da zero

Certo, se serve, puoi comunque chiedere specifici chiarimenti sulle particolari scelte che ho adoperato.

Buona continuazione

[ivanisevic82]

Killer, funziona tutto perfettamente!

Ovviamente mi ci vorrà del tempo per studiare e capire le soluzioni che hai adottato, ammesso che io riesco a comprendere tutto fino in fondo con le mie competenze limitate.

Per il momento l'unica parte che ho dovuto cancellare è questa:

  .header__menu .menu-item .sub-menu:not(.show-submenu) {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

Quando studierò il codice completo cercherò eventuali altre parti da rimuovere per pulizia.

Non so come ringraziarti!