Caratteristica scorrevole per navigazione fuori bordo: jquery, html, css, zurb-foundation, translate3d

Quindi ho giocato con questa telanavigazione dalla Fondazione e sono andati molto oltre. Ho una lista di menu con sottomenu al loro interno, tutti posizionati a sinistra della mia pagina. Ecco il mio codice adesso:

<ul class="uppercase off-canvas-list">
<li class="has-submenu"><a href="#">List 1</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
<li class="has-submenu"><a href="#">List 2</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
<li class="has-submenu"><a href="#">List 3</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back</a></li>
<li><a href="#">Name 1</a></li>
<li><a href="#">Name 2</a></li>
<li><a href="#">Name 3</a></li>
</ul>
</li>
</ul>

Ora quando clicchi su uno dei sottomenuscivola da destra. Mi stavo chiedendo se ci fosse un modo per farlo scivolare da sinistra. Ho provato a cambiare la classe sul figlio ul di quel li in "right-submenu" e non sembra funzionare. Qualcuno sa di altre opzioni che potrebbero funzionare?

Il file CSS che sto usando è il defaultfile foundation.css. Sto anche utilizzando i file off-canvas.js e foundation.js, ma questi non sono stati manipolati affatto, mi sembra che il problema risieda nel file CSS. Ecco la classe che viene fornita quando scorre dal destra:

.left-submenu.move-right
{
-ms-transform: translate(0%, 0);
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

Forse modificando questa parte per farlo scorreredall'altra parte è quello che devo fare? Ho provato a cambiare i valori al 100%, ma ho solo spostato tutto a sinistra e dall'altra parte sotto il contenuto principale. Qualsiasi aiuto?

risposte:

Ecco la risposta per chiunque incontri questo problema:

Nel file foundation.css c'è una classe intitolata .left-submenu. Modificare i seguenti valori in cosa li ho modificati in:

  -webkit-overflow-scrolling: touch;
-ms-transform: translate(100%, 0);
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);

Quindi, negli stili per la classe .left-submenu.move-right, cambia quanto segue in ciò che ho di seguito:

    -ms-transform: translate(0%, 0);
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0); }