[Javascript] problema menu responsive su aruba, editor bk

PavlovTheDog

Nuovo Utente
14 Apr 2018
24
0
1
Ciao a tutti.
Ho un problema con il menu di navigazione responsive sul mio sito creato tramite aruba, e quindi l'editor BaseKit.
Dovendo creare il sito in due lingue, ho dovuto inserire due menu di navigazione con nomi pagine e collegamenti alle pagine diversi, ma, sebbene abbia ricopiato il codice html del widget di navigazione incluso nel template, non mi funziona in modo responsive.

Purtroppo è una situazione contrattuale in cui non posso ricevere supporto "sviluppatori" nè dal provider, nè dallo staff di BK...

Ho un codice html di questo tipo:

HTML:
            <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 class="js-menu-list  14-items">
                       <li id="menu-item_1" class="home"><a href="/"><span class="text">pagina iniziale</span></a></li>
                       <li "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 "menu-item_3" class="page"><a href="/acquerello"><span class="text">acquerello</span></a></li>
                               <li "menu-item_4" class="page"><a href="/incisione"><span class="text">incisione</span></a></li>
                           </ul>
                           .....
                        </ul>
                       <a href="#" class="pull js-pull"></a>
                </div>
              </div>

Dovrei fare in modo che l'elemento "a.pull", presente nella visualizzazione per tablet e smartpone, mostri e nasconda al click le voci del menù di navigazione.
I CSS sono giusti e infatti il menu viene visualizzato "block" se aggiungo manualmente, tramite HTML la classe "open" all'elemento ul.
Nell'editor c'è già preimpostato un codice javascript/jquery che evidentemente non riesce a svolgere questa funzione. Non so come venirne a capo. Ho già provato alcuni script, ma o non li so adattare, oppure semplicemente non so come inserirli.
Sarei molto grato se qualcuno potesse aiutarmi.
Grazie in anticipo a tutti.
 
Ultima modifica:
Non so se qualcuno abbia mai avuto interesse in questo thread, ma, per la cronaca, ho risolto così:

HTML:
<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>

Bye.
 

Discussioni simili