Submenu in versione mobile solo CSS

[ivanisevic82]

ok, si sostanzialmente è ciò che hai indicato, la barra di navigazione non influisce sulla dimensione del viewport.

Di norma la barra viene nascosta/mostrata quando si effettua lo scorrimento nel body. A quel punto, qualora venisse nascosta, non si presenterebbe il problema per il menu.

Il fatto è che, da tue ultime modifiche, hai reso il body non "scorribile"; quindi questo impedisce (per alcuni browser) che la barra di navigazione sia nascosta/mostrata quando viene effettuato lo scorrimento su elementi diversi dal body.

Da quello che ho potuto provare, alcuni browser nascondono/mostrano la barra anche quando il body di fatto non può scorrere, come in questo caso, ma si effettua un trascinamento oltre il limite dei contenuti, che forza l'azione di nascondere/mostrare la barra. Questo mi avviene con Chrome su android.

Ora, mi pare strano che l'applicazione del padding non risolva.
Da ciò che ho provato io, questo funziona, nel senso che a quel punto le ultime voci sono comunque visibili.
Riprova e assicurati di vuotare la cache quando effettui la verifica.

Magari metti online la modifica e avvertimi così che possa verificare anche io.

Ci siamo, funziona!!!

Forse la prima volta che ho provato non avevo riscontrato nulla di buono in quando avevo dato un padding-bottom insufficiente (50px).

Ho provato a dare lo stesso valore del top (90px) e adesso funziona bene!

Ottimo, una di meno, grazie come sempre!

Adesso mi dedicherò alla ricerca di una soluzione per far si che il menu si chiuda cliccando su un punto fuori dal pannello...e dopo che avrò risolto forse con questo benedetto menu avremo finito!

[ivanisevic82]

E questa volta il mio amico ChatGPT non si è confuso!

Prima gli ho chiesto di modificare il mio codice per far si che si chiudesse (anche) con un qualsiasi click al di fuori del pannello del mobile-menu e lui mi ha fornito questa soluzione:

$(".header__icon-bar").click(function(e) {  $(".header__menu").toggleClass('show-menu');  $('html').toggleClass('mobile-menu-open');  e.stopPropagation();});$(document).click(function(e) {  if (!$(e.target).is('.header__icon-bar, .header__menu')) {    $(".header__menu").removeClass('show-menu');    $('html').removeClass('mobile-menu-open');  }});

Ancora una volta però si verificava il problema che dopo l'apertura del menu la pagina tornava in cima.

Interpellato nuovamente mi ha detto:

Per risolvere il problema del ritorno in cima della pagina quando clicchi sull'hamburger, puoi utilizzare il metodo preventDefault() per evitare il comportamento predefinito del clic sul link. Ecco una versione modificata del tuo codice:

$(".header__icon-bar").click(function(e) {
  e.preventDefault(); // Evita il comportamento predefinito del clic sul link
  $(".header__menu").toggleClass('show-menu');
  $('html').toggleClass('mobile-menu-open');
  e.stopPropagation();
});


$(document).click(function(e) {
  if (!$(e.target).is('.header__icon-bar, .header__menu')) {
    $(".header__menu").removeClass('show-menu');
    $('html').removeClass('mobile-menu-open');
  }
});

Ed effettivamente così funziona bene!

Ora non mi resta che implementare un cambio colore dell'hamburger allo scrolling (come avviene per l'elemento logo) e ad inserire un animazione per rendere più carino il passaggio da hamburger a X.

[KillerWorm]

E questa volta il mio amico ChatGPT non si è confuso!
...
Ora non mi resta che implementare un cambio colore

Bene

chiedigli poi di validare anche il codice HTML... è costellato di errori che potrebbero generare risultati inattesi. Ti consiglio vivamente di correggerli il prima possibile (come già indicato in pvt)
https://validator.w3.org/

[ivanisevic82]

Bene

chiedigli poi di validare anche il codice HTML... è costellato di errori che potrebbero generare risultati inattesi. Ti consiglio vivamente di correggerli il prima possibile (come già indicato in pvt)
https://validator.w3.org/

Certo Killer, quella è l'ultima voce della mia lista, ma è una delle più importanti!

Grazie mille per il meraviglioso supporto, tornerò a disturbare voi amici del forum all'occorrenza.

Alla prossima!

EDIT: Dato che ci siamo, quel validator che hai linkato funziona anche se ho il sito in coming soon mode?

[KillerWorm]

EDIT: Dato che ci siamo, quel validator che hai linkato funziona anche se ho il sito in coming soon mode?

Se usi "Validate by URI" becca solo ciò che è pubblico, ma se dalla pagina del tuo sito fai "Sorgente pagina" puoi copiaincollare quel codice nello strumento "Validate by direct input" del validatore.

Tieni conto che alcuni errori possono interrompere la verifica del resto, per cui dovrai risolvere in più step per arrivare ad ottenere un codice completamente validato.