Pagina 3 di 5 primaprima 1 2 3 4 5 ultimoultimo
Visualizzazione dei risultati da 21 a 30 su 45
  1. #21
    Buongiorno a tutti, torno sull'argomento per una nuova domanda.

    Volendo migliorare l'esperienza d'uso del mobile menu, sono riuscito ad implementare una funzione che mi consente di chiudere il menu facendo click (o tap) sulla porzione di schermo non coperta dal medesimo (il 20% residuo dello schermo).

    Ora ho notato che facendo lo scrolling sul menu questo rimane immobile, mentre scorre il contenuto del sito parzialmente coperto dal pannello del menu.

    Come posso fare a "trasferire" lo scrolling dal sito sottostante, al pannello del mobile menu sovrastante?

    Immagine si debba lavorare con la proprietà "overflow", ma non sono riuscito ancora a realizzare ciò che vorrei...grazie del supporto!

  2. #22
    Scusate il doppio post ma è subentrata una ulteriore esigenza, per la quale necessito ancora di supporto.

    Volendo inserire nel pannello del menu-mobile ulteriori elementi (logo in alto e una sorta di footer in basso), avevo pensato di inserire tali elementi con pseudoclassi before e after prima e dopo il menu.

    Ho così testato questa soluzione "artigianale":

    codice:
    ul#menu-menu-bonlaw.header__menu:before { position: absolute;
      content: "";
    height: 59px !important;
    width: 200px !important;
    background-size: 200px 59px !important; 
    margin-top: 5px !important;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url('https://miopercorso/Logo.png');
        margin-top: -70px !important;
        margin-left: 25px;
    }
    Mi sono accorto tuttavia che questa strada risulta molto limitante, non potendo articolare bene la struttura html del footer mediante una pseudo-classe.

    Così ho cambiato approccio e modificato la struttura html, creando un div che contiene la versione desktop del menu ed un'altro che contiene quella mobile.

    I rispettivi div vengono nascosti alternativamente a seconda della risoluzione, ecco il codice che ho adottato:

    codice:
        <div id="desktop-menu">
    <?php /* Main Navigation */        wp_nav_menu( array(
              'theme_location' => 'header',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'header__menu'
              )
            );
          ?>
        </div>
    
        <div id="mobile-menu-panel">
    
        <div>test</div>    
    
    
              <?php /* Main Navigation */
            wp_nav_menu( array(
              'theme_location' => 'header',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'header__menu'
              )
            );
          ?>
    
    </div>
    codice:
    /* Desktop */@media (min-width: 920px) {
        
    #mobile-menu-panel {      
    display: none;
    }
    }
    
    
    /* Smartphone */
    @media (max-width: 920px) {
        
    #desktop-menu {      
    display: none;
    }
    }
    Nel "mobile-menu-panel" ho inserito solo un div "test" per verificare il funzionamento di tale soluzione.

    Il problema è appunto che non funziona, nel senso che nel sorgente della pagina non visualizzo nessuna delle modifiche html che ho apportato.

    Non riesco davvero a darmi una spiegazione...spero nel vostro supporto!

    Grazie!

    EDIT: mi sbagliavo, forse non avevo cancellato correttamente la cache.
    Le modifiche vengono apportate, ma non vanno bene, in quanto il div "test" viene visualizzato nella parte desktop e non in quella mobile...

    Penso che l'errore principale dipenda dal fatto che con questo approccio andrebbe modificato anche il JS che comando l'apertura del pannello tramite hamburger, in quanto dovrebbe essere riferita al nuovo DIV e non al menu.

    E' corretto?

    Non vado oltre nei testo perché temo di fare casino, resto in attesa del vostro supporto, grazie!
    Ultima modifica di ivanisevic82; 26-05-2023 a 12:37

  3. #23
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao
    Quote Originariamente inviata da ivanisevic82
    Ora ho notato che facendo lo scrolling sul menu questo rimane immobile
    Normalmente quel tipo di menu rimane fisso con altezza pari a quella del body o della viewport.
    Il contenitore del menu dovrebbe avere un suo "overflow:auto" che consente di scorrerlo se i contenuti eccedono dai limiti del contenitore stesso.
    Verifica tu stesso che queste caratteristiche siano mantenute con le modifiche che hai apportato.

    Quote Originariamente inviata da ivanisevic82
    creando un div che contiene la versione desktop del menu ed un'altro che contiene quella mobile.
    e questo è quello che tecnicamente viene detto "layout adattivo", più difficile da gestire/modificare rispetto ad un layout responsivo, perché di fatto hai due elementi separati che tendenzialmente hanno lo stesso contenuto ma presentati in modo diverso.

    Il mio consiglio è quello di mantenere le cose come stanno, impostando gli elementi secondo la loro stessa funzionalità. Il menu è un menu, non puoi pensare di inserirci logo, footer e quant'altro, è una cosa contro logica oltre a non rispettare gli attuali canoni dei layout responsivi.

    Se io atterro sul tuo sito, normalmente vedo già logo, footer ed elementi accessori del layout, quindi ricevo già quelle relative informazioni che tu vuoi darmi; ma quando apro il menu, lo faccio semplicemente per navigare il sito, e vorrei poterlo fare nella maniera più semplice possibile senza bisogno di ricevere ulteriori informazioni non necessarie a questa funzione e tra l'altro ridondanti; ogni cosa ha il suo posto, perché mai dovresti riappiopparmi un logo o un footer sul menu?! IMHO.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #24
    Caro killer,
    in effetti hai ragione.

    Ho dato un occhiata anche ad altri siti, in effetti nessuno inserisce altri elementi oltre al menu.

    Mi resta la tentazione di lasciare solo il logo perché ho testato e non mi sembra starci male, tuttavia per fare ciò basta una semplice pseudoclasse before.


    Riguardo invece alla questione dello scorrimento ho verificato meglio: in effetti laddove la lunghezza del menu supererebbe quella della pagina, si abilita lo scorrimento.

    Oltre a questo ci sono altri due piccoli dettagli sui quali mi piacerebbe intervenire.

    Il primo: ho notato che quando si clicca sull'hamburger la pagina web sottostante torna automaticamente in cima.
    Questo non mi piace perché l'utente potrebbe decidere (mentre è a metà di una lettura, a centro pagina) di cliccare sull'hamburger e poi di tornare alla lettura, senza ritrovarsi di nuovo in cima.

    Il secondo: ho notato che quanto si clicca sulle voci del menu per una frazione di secondo appare uno sfondo scuro.
    Da cosa può dipendere?
    Ovviamente mi piacerebbe eliminare questo effetto.

    Grazie come sempre per il supporto!
    Ultima modifica di ivanisevic82; 26-05-2023 a 18:01

  5. #25
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Quote Originariamente inviata da ivanisevic82
    ho notato che quando si clicca sull'hamburger la pagina web sottostante torna automaticamente in cima.
    non so, io non lo sto notando, quantomeno sulle pagine originali. Scorro la pagina, clicco l'hamburger, si apre il menu, riclicco per chiuderlo e la pagina resta nella posizione in cui l'avevo lasciata.

    Forse dipende dalle ultime modifiche che hai apportato

    Quote Originariamente inviata da ivanisevic82
    ho notato che quanto si clicca sulle voci del menu per una frazione di secondo appare uno sfondo scuro.
    credimi, non sto notando nemmeno questo

    inutile dirlo: forse dipende dalle ultime modifiche che hai apportato
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #26
    Ciao Killer, sicuramente non dipende dalle ultime modifiche di cui abbiamo discusso poco sopra, in quanto ho ripristinato tutto allo stato preesistente, volendo seguire i tuoi consigli circa l'inutilità dell'aggiunta di quegli elementi nel menu.

    C'è stata però una modifica sostanziale che avevo apportato, su suggerimento (evidentemente imperfetto) di chatGpt.

    Siccome volevo che il pannello del menu si potesse chiudere anche cliccando sulla residua parte dello schermo non coperta dal pannello (e non solo ricliccando sull'hamburger), ho chiesto al mio amico virtuale, il quale mi ha suggerito di utilizzare il seguente codice:

    codice:
    $(document).ready(function() {
      $(".header__icon-bar").click(function(e) {
        $(".header__menu").toggleClass('show-menu');
        e.stopPropagation(); // Evita la propagazione del clic all'elemento finestra
      });
    
    
      $(window).click(function(e) {
        var menu = $(".header__menu");
        if (!menu.is(e.target) && menu.has(e.target).length === 0) {
          menu.removeClass('show-menu');
        }
      });
    });
    Funzionava...ma comportava appunto il fatto che ad ogni click sull'hamburger tornavo in cima alla pagina.

    Ho ripristinato il vecchio codice e non torna più in cima.

    Resta il fatto che mi piacerebbe implementare una chiusura con tap in qualsiasi punto esterno al pannello-menu.
    Come posso fare? La soluzione prospettata da ChatGPT era errata o solo incompleta?

    Per quel che concerne la seconda questione (cioè che appare per una frazione di secondo uno sfondo scuro sulla voce del menu che si clicca), ciò avviene SOLTANTO in vero mobile (non in desktop che simulano il mobile).

    In altre parola ti invito a provare con un cellulare e farmi sapere (io uso un iPhone, lo riscontro sia con Safari sia con Chrome).

    Infine, per quel che riguardo lo scroll del pannello, ho fatto un giro per confrontare soluzioni su menu mobile simili al mio.

    Risultato: in nessuno di questi pannelli accade che lo scrolling intervenga anche sul sito che sta sullo sfondo del pannello sovrapposto.

    Nel mio caso invece lo scroll agisce si sul pannello, ma arrivato in fondo allo scorrimento del pannello (oppure se il pannello non deve scorrere perché più corto della pagina), scorre il sito sottostante.

    Questo per me non ha molto senso, perché alla chiusura del pannello il sito dovrebbe essere li dove lo avevo lasciato...spero che tu condivida questa impostazione e che sia possibile risolvere senza molte complicazioni.

    Grazie!

  7. #27
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Quote Originariamente inviata da ivanisevic82
    C'è stata però una modifica sostanziale
    ...
    volevo che il pannello del menu si potesse chiudere anche cliccando sulla residua parte dello schermo
    si, era compreso anche questo col mio "ultime modifiche"

    Quote Originariamente inviata da ivanisevic82
    mi piacerebbe implementare una chiusura con tap in qualsiasi punto esterno al pannello-menu.
    Proverò a dare uno sguardo per capire come impostare meglio questa funzionalità

    Quote Originariamente inviata da ivanisevic82
    ciò avviene SOLTANTO in vero mobile
    ...
    ti invito a provare con un cellulare e farmi sapere
    sì, avevo provato infatti con un samsung (android) Chrome, al tap sulle voci menu vedo che lo sfondo diventa di un celestino (comunque piuttosto chiaro); se parlavi di questo, è una funzionalità del browser, per cui l'elemento viene evidenziato al tap nel momento in cui si attiva, ma questo avviene normalmente. Non so se si possa eliminare.

    Se non è quello che intendevi, allora non so che dire


    EDIT:
    nel caso, prova a cercare qualcosa del tipo: "remove background highlight on tap"
    Ultima modifica di KillerWorm; 26-05-2023 a 19:54
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #28
    Ok, soluzione trovata per lo sfondo su mobile!

    codice:
    -webkit-tap-highlight-color: transparent;
    che per applicarla globalmente (su mobile), ho definito così:
    codice:
    input,
    textarea,
    button,
    select,
    a {
    -webkit-tap-highlight-color: transparent;
    }
    Qui ho trovato la soluzione:

    https://stackoverflow.com/questions/...tton-on-mobile

    Ora cerco qualcosa per risolvere il problema dello scrolling e per avere la chiusura del pannello al tap fuori di esso...ovviamente Killer se farei prima di me (come credo ) scrivi pure!

    EDIT: per quel che riguardo lo scrolling del sito sotto il pannello, ho individuato una possibile soluzione, che però non ho ancora potuto testare.

    Una bozza di codice sarebbe questo:

    codice:
    .mobile-menu-open body {    overflow: hidden;
    }
    Il problema è che non so quale elemento dovrebbe precedere "body"...
    Ultima modifica di ivanisevic82; 26-05-2023 a 21:30

  9. #29
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Quote Originariamente inviata da ivanisevic82
    codice:
    .mobile-menu-open body {    overflow: hidden;
    }
    Il problema è che non so quale elemento dovrebbe precedere "body"...
    Precisiamo:
    l'elemento che in quella regola è identificato dalla classe ".mobile-menu-open" non è un elemento che dovrebbe "precedere" body, piuttosto è un elemento "antenato" di body.

    Quel selettore infatti è caratterizzato dal "combinatore spazio" che rappresenta un "selettore di discendenza", nella forma: "elemento-contenitore elemento-discendente".

    Ora, per forza di cose quell'elemento contenitore non può essere altro che l'elemento <html>, dal momento che in un normale documento HTML non ci sono altri ascendenti di <body> se non il solo e unico <html>.

    Si può quindi dedurre che quel CSS è proposto col presupposto che venga applicata la classe ".mobile-menu-open" all'elemento <html> quando l'hamburger-menu risulta aperto.

    Ovviamente tale classe andrà applicata/rimossa attraverso JavaScript. Ti invito a provare tu stesso ad impostare la cosa.
    Ultima modifica di KillerWorm; 27-05-2023 a 12:22
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #30
    Allora, ho trovato una soluzione che sembra funzionare:

    codice:
    $(".header__icon-bar").click(function(e) {  $(".header__menu").toggleClass('show-menu');
      $('html').toggleClass('mobile-menu-open'); // Aggiungi questa linea per aggiungere/rimuovere la classe al tag HTML
      e.preventDefault();
    });
    codice:
    .mobile-menu-open body {    
    overflow: hidden;
    }
    In questo modo il sito di sfondo resta fermo e il menu scorre...o meglio scorreva!

    Ci� in quando lo scorrimento mi sembrava funzionare soltanto fino alla fine del sub-menu, lasciando non visibili le ultime due voci del menu principale.

    Cos� ho trasformato tutti gli "overflow: hidden" in "auto".
    L'ho fatto in tutte le parti del CSS che abbiamo aggiunto di recente per il menu mobile.

    Risultato: non scorre pi� niente

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.