problema menu di navigazione responsive (extendednavigation) su aruba supersite con editor basekit

[PavlovTheDog]

Ciao a tutti!
Vi sottopongo un problema su cui sto sbattendo la testa da troppo tempo e che non sono riuscito a risolvere. Spero tanto che qualcuno possa aiutarmi...

Ho creato il mio sito personale tramite aruba supersite e quindi con editor basekit v.8.18.2. Grazie a quello che ho appreso dalle vostre guide su HTML e CSS, funziona tutto a dovere, eccetto una cosa:

Dovendo fare il sito sia in italiano che in inglese, ho copiato il codice html del widget extendednavigation, e l'ho personalizzato nelle due lingue inserendolo nei file delle relative pagine. Purtroppo nella visualizzazione per i media tablet e mobile, pur comparendo l'icona comunemente chiamata "hamburger", quest'icona non apre al click il menu di navigazione.

C'� da dire che l'editor ha delle complicate (almeno per me) funzioni javascript gi� preinserite, che funzionano per il widget base, assegnando la classe "open" alla lista del menu quando si clicca sull'icona "hamburger" (che � un elemento js-pull), ma che non funzionano per il mio html personalizzato (se aggiungo manualmente, via html la classe "open", effettivamente visualizzo il menu).

Scusandomi per la lunghezza del post, mi rimetto alle vostre conoscenze. Spero davvero che qualcuno possa indirizzarmi. Sono ovviamente a vostra disposizione per fornirvi i codici a cui faccio riferimento.
Grazie.

[ciro78]

ciao,
posta il link alla pagina. senza sapere l'errore non possiamo sapere

[PavlovTheDog]

Ciao Ciro,
grazie per la risposta.
Per una strana coincidenza, poco dopo aver scritto il thread, sono riuscito a risolvere il problema.

Adesso vorrei fare in modo, con javascript, che si evidenziasse la voce del menu relativa alla pagina che si sta visualizzando. Gia' ho nei CSS una classe .selected.

In attesa di un aiutino, posto il codice html con la funzione javascript con cui ho finalmente ottenuto due diversi menu di navigazione in italiano e in inglese, visto che io ci stavo perdendo la testa e magari può risultare utile a qualcun altro...

Ho sostituito questo:

{{widget('extendednavigation', 'navigation', {})|raw}}

che è la stringa che fornisce il widget di navigazione di base,
con:

<div id="page-zones__template-widgets__extendednavigation-navigation" class="widget extendednavigation" data-widget-type="extendednavigation" data-uniqueid="page-zones__template-widgets__extendednavigation-navigation">
  <div class="extendednavigation"  align="center">
    <ul id="menunav" class="js-menu-list 13-items">
       <li id="menu-item_1" class="home  page"><a href="/"><span class="text">pagina iniziale</span></a></li>
       <li id="menu-item_2" class="page  folder" aria-haspopup="true"><a href="/galleria"><span class="text">galleria</span></a>
         <ul class="js-menu-list 2-items page">
           <li id="menu-item_3" class="page"><a href="/acquerello"><span class="text">acquerello</span></a></li>
           <li id="menu-item_4" class="page"><a href="/incisione"><span class="text">incisione</span></a></li>
          </ul>
       </ul>
         <a onclick="showNav()" href="#" class="pull  js-pull"></a>
</div>
</div>

<script>
function showNav() {
    var element = document.getElementById("menunav");

    if (element.classList) { 
        element.classList.toggle("open");
    } else {
        var classes = element.className.split(" ");
        var x = classes.indexOf("open");

        if (x >= 0) 
            classes.splice(x, 1);
        else 
            classes.push("open");
            element.className = classes.join(" "); 
    }
}
</script>

Al codice html, copiato pari pari dal widget.extendednavigation, ho aggiunto le parti che ho evidenziato in grassetto:

- un id=menunav all'elemento ul del menu,
- la stringa onclick="showNav()" nell'elemento a.pull per richiamare la funzione e, appunto,
- la funzione trovata in rete, con le variabili, che per ignoranza non ho ben capito, ma che credo consentano di ampliare l'array di classi e aggiungere la classe .open.

Questi cambiamenti li ho apportati in tutti i file.twig del template contenenti l'html completo di singole pagine o gruppi di pagine (es. home.twig e default.twig) del sito. Ovviamente inserendo, per l'inglese, ulteriori file.twig con gli "href" alle pagine in inglese e gli "span" tradotti.

Ora attendo qualche anima pia che mi aiuti ad evidenziare le voci delle pagine attive nel menu.
Grazie mille e buona serata.