Submenu in versione mobile solo CSS

[ivanisevic82]

Ciao a tutti, avrei bisogno di supporto per una questione che spero possa essere risolta via CSS (diversamente vi chiederò di indirizzarmi o nella sezione PHP o in quella JS).

Nel mio sito WordPress, in versione desktop, faccio apparire un submenu al passaggio del mouse sulla voce del menu che contiene delle sotto pagine, mediante questa regola:

.menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; }

Il tutto senza JS ma con solo CSS.

Per la versione mobile del sito vorrei sostituire la funzione "hover" con quella del classico tap (o clic che dir si voglia) su una freccetta che posizionerei alla destra della voce del menu che contiene delle sottopagine.

Preciso che io ottengo la parte html mediante questa funzione wordpress, che provvede a creare autonomamente la struttura del menu:

      <?php /* Main Navigation */
        wp_nav_menu( array(
          'theme_location' => 'header',
          'depth' => 2,
          'container' => false,
          'menu_class' => 'header__menu'
          )
        );
      ?>

Pertanto non so se c'è la possibilità di modificare (ove fosse necessario) la struttura html.

E' una cosa che posso realizzare solo via CSS?

O dovrò ricorrere necessariamente al JS?

Grazie per il supporto!

[KillerWorm]

Ciao, in genere per il mobile può essere usata la pseudo-classe :active. Bisogna capire però come vorresti impostare la freccetta di cui parli. Tecnicamente l'elemento da visualizzare dovrebbe essere figlio dell'elemento in cui applichi :hover e/o :active, o tuttalpiù fratello adiacente che lo segue, non che lo precede; questo per via della natura stessa del CSS che funziona a cascata.

Il fatto che tu voglia mettere a destra la freccetta su cui agisci, mi lascia pensare che l'elemento da visualizzare, a livello strutturale, sia posto prima di quella freccetta (cioè la precede), in questo caso la faccenda si complica per poterla gestire solo da CSS.

Nel caso si potrebbe tentare di mantenere strutturalmente la freccetta a sinistra e, sempre da CSS, "invertire" l'ordine a livello visivo.
Sarebbe però necessario lavorare su un esempio concreto per dirti come procedere.

Magari fai tu qualche prova e nel caso prova a postare un esempio minimo della situazione.

[ivanisevic82]

Ciao Killer e grazie innanzitutto per la consueta competenza e disponibilità.

Non sono sicuro di avere compreso bene il discorso del posizionamento, ma la mia è una situazione molto ordinaria…

Prendo un esempio a caso, il sito della Smeg Italia: https://www.smeg.com/it

Se lo apri in versione mobile vedrai che c’è un hamburger menu e che alcune delle voci lì presenti hanno dei sotto menu che si aprono con un clic.

L’unica differenza rispetto al mio è che nel mio caso sarebbe specularmente opposto: sposta tutto sulla sinistra anziché sulla destra.

Inoltre il mio menu è molto più semplice, ha una sola voce che presenta sub menu.

edit: ecco un esempio ancora più chiaro di come dovrebbe essere il mio menu (lasciate perdere la lingua, è la prima immagine trovata su internet)

IJzud.jpg

Secondo Edit: lo stesso menu mobile del sito di html.it è strutturato così!

E qui c’è un sito di esempio in puro Css

https://www.cssscript.com/demo/hambu...tion-submenus/

forse dovrei partire studiando da qui…

[KillerWorm]

Chiaro, giusto per tagliare la testa al topo, la tua situazione molto ordinaria prevede l'uso di un minimo di JavaScript, come gli esempi da te citati

In CSS non esiste la gestione di eventi (come può essere l'evento click), si può giusto agire in base ad un particolare "stato" che un dato elemento può avere; ad esempio ":hover", ":focus", ":active", ":checked" e via dicendo per diversi tipi di elemento, ma il "click" non è uno stato che un elemento può avere, piuttosto è un evento che puoi gestire più propriamente attraverso JavaScript.

Benché in CSS sia possibile con qualche trucco "simulare" la gestione del click, usando ad esempio ":focus" o ":active" o ":checked", questo lascia il tempo che trova se la questione può essere risolta molto più semplicemente con un po' di JavaScript.

Da quel che ho capito ti serve realizzare fondamentalmente un hamburger menu. In questo caso il mio consiglio è quello di prendere la strada più semplice. Puoi trovare facilmente più materiale per risolvere con JavaScript. Il CSS può servire giusto per impostare la parte presentazionale, ma la gestione di apertura chiusura attraverso l'evento click si risolve più adeguatamente via JavaScript.

Intanto ti invito a fare qualche ricerca sul web dove puoi trovare sicuramente varie guide e tutorial sull'argomento "hamburger menu", come già hai potuto constatare.

Poi fammi sapere come vuoi proseguire, eventualmente modifico il titolo e sposto la discussione in JavaScript.

Buon proseguimento

[ivanisevic82]

Per far visualizzare correttamente la versione mobile ho dovuto agire su alcuni elementi css, modificando padding o altri parametri. Ho notato che quando si clicca sulla voce che fa aprire il submenu nel passaggio da display hidden a display block, guardando la sezione ispeziona di chrome, noto che nella classe ul submenu appaiono molto rapidamente una serie di padding e margin con molti numeri che si aggiornano rapidamente. Questo comporto probabilmente uno sforzo del sistema, infatti ma transizione non è molto fluida. Perché accade? Grazie ancora! In realtà penso non ci sia bisogno di spostare in JS perché avrei risolto con questo codice che mi ha suggerito chatGPT e che funziona:

  function isMobile() {    return window.innerWidth < 920;
  }


  $(".header__menu .menu-item-has-children > a").click(function(e) {
    if (isMobile()) {
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    }
  });

Rimane un problema che non ho capito se va affrontato lato CSS o in altra maniera...

Ho notato che quando si clicca sulla voce che fa aprire il submenu, nel passaggio da display hidden a display block, guardando la sezione ispeziona di chrome, noto che nella classe relativa al submenu appaiono molto rapidamente una serie di padding e margin, con molti numeri che si aggiornano rapidamente. Il tutto avviene in una frazione di secondo ma sono riuscito a fare uno screen esemplificativo:


Questo comporta probabilmente uno sforzo del sistema, infatti la transizione non è molto fluida (com'è invece quella che apre il menu principale quando si clicca sull'hamburger).

Perché accade?
Forse ho usato un approccio sbagliato nelle media queries?

Forse al posto di modificare il submenu per adattarlo alla versione mobile avrei dovuto crearne uno ex novo?

Oppure tutto ciò ha a che fare con la presenza della parte JS?

[ivanisevic82]

Forse ho trovato una risposta da solo, ma aspetto sempre voi per conferma...

Nell'aprire il menu principale tramite hamburger uso questo codice JS:

		$(".header__icon-bar").click(function(e){		 $(".header__menu").toggleClass('show-menu');
		 e.preventDefault();
	});

Invece per la parte del submenu questo:

  $(".header__menu .menu-item-has-children > a").click(function(e) {
    if (isMobile()) {
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    }
  });

In pratica nel primo caso un un semplice toggle per aggiungere e rimuovere una classe, gestendo poi via css il movimento e il modo in cui il pannello viene mostrato.

Al contrario nel secondo JS che ho postato il movimento è gestito dallo "slideToggle": la funziona scorrimento viene gestita via JS e non sia CSS.

E' forse questo che determina quel comportamento che ho descritto al posto sopra?

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

Se devo trasferirmi in JavaScript fatelo pure...anche se poi forse mi servirà di nuovo il vostro aiuto per gestire la parte css!

Grazie!

[KillerWorm]

E' forse questo che determina quel comportamento che ho descritto al posto sopra?

Sì, è più o meno quanto hai descritto. Il metodo slideToggle() di jQuery (quindi JavaScript) agisce direttamente sugli elementi specificati applicando delle proprietà CSS runtime.
Benché sia comunque implicato il CSS per effettuare l'animazione, JavaScript modifica i valori delle proprietà ricorsivamente per ottenere appunto l'effetto animato.

Questo in genere implica un maggiore lavoro del processore rispetto a delle animazioni/transizioni create col solo CSS.

Infatti nel primo caso JavaScript si occupa solo di applicare e togliere una classe, ma l'effetto animato è poi gestito tutto attraverso il CSS.

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

Suppongo di sì. Teoricamente dovresti poter fare la stessa cosa anche per il secondo caso, usando una impostazione come per il primo.

Non so cosa faccia la classe "show-menu" e non so se puoi usarla anche per il sottomenu. Fai magari una prova.

Diversamente dovresti impostare il CSS per una specifica classe, tipo "show-submenu", che poi applichi via JavaScript col criterio adottato per il primo caso.

Per darti dei suggerimenti mirati bisognerebbe vedere la pagina su cui vuoi ottenere quell'effetto. Puoi postare un link?

Se devo trasferirmi in JavaScript fatelo pure...

Per il momento proseguiamo qui.

[ivanisevic82]

Caro Killer, hai centrato il punto (come sempre).

Per adottare la soluzione da te prospettata avevo chiesto a ChatGPT, che è il mio pusher ufficiale di JS.

Mi ha suggerito questa soluzione:

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

Funziona, nel senso che la classe show-submenu viene correttamente aggiunta.

Tuttavia sto avendo delle difficoltà a fare funzionare correttamente il tutto, perché mi si verificano una serie di problemi:

1) Continua ad attivarsi la visualizzazione del submenu anche in funzione "hover" (che invece mi serve solo la versione desktop).

2) Il submenu mi si sovrappone al menu, come se avesse un posizionamento assoluto, anche se glielo do relativo.

3) Altri problemi marginali che rinuncio ad elencare...

Mi piacerebbe molto farti dare un occhiata, ma il sito (che fino a qualche tempo fa era solo offline nel mio MAMP), adesso è online, ma in modalità "coming soon".

Posso mandarti via PM delle credenziali per accedere, mi farebbe molto piacere!

Grazie!

[KillerWorm]

Funziona, nel senso che la classe show-submenu viene correttamente aggiunta.

bene, almeno hai un punto di partenza

Posso mandarti via PM delle credenziali

manda pure, gli darò uno sguardo questi giorni, appena possibile

[ivanisevic82]

Ti ringrazio infinitamente Killer, il tuo aiuto è davvero prezioso per me.

Sto cercando un modo per farti accedere con delle credenziali mentre sono in modalità coming soon.

Il mio attuale plugin non lo consente ma sto cercando un'alternativa utile in tal senso.
Ti manderò un PM appena l'avrò trovata, grazie!

EDIT: non serve un plugin, è bastato creare un nuovo profilo utente con sola lettura in wordpress.

Ti mando il PM per accedere!