/ / Zurb Foundation 4, Off Canvas und Shopify - zurb-foundation, shopify, liquid

Zurb Foundation 4, Off Canvas und Shopify - zurb-foundation, shopify, flüssig

Hi ich versuche die zub foundation 4 zu bekommenDas mobile Menü funktioniert nicht in meinem Shop. Das Problem, das ich habe, ist, dass es den Menü-Button fein anzeigt, aber es löst nichts aus, wenn es angeklickt wird und die vorgeladene Sidebar ist auf dem Desktop sichtbar

Der Code, den ich bisher benutzt habe, ist

<!-- mobile only side bar -->
<header class="row">
<div class="large-8 columns small-2">
<p class="show-for-small">
<a class="sidebar-button button" id="sidebarButton" href="#sidebar" >Menu</a>
</p>
</div>
<section id="sidebar" role="complementary">
<nav id="sideMenu" role="navigation">
<ul id="sideMainNav" class="nav-bar">
<li><a href="">test</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
<li><a href="">Four</a></li>
</ul>
</nav>
</section>
</header>
<!-- /mobile -->


<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document.write("<script src=/"
+ ("__proto__" in {} ? "zepto" : "jquery")
+ ".js></script>");
</script>

{{ "zepto.js" | asset_url | script_tag }}
{{ "foundation.min.js" | asset_url | script_tag }}
<script>
$(document).foundation();
</script>
{{ "jquery.offcanvas.js" | asset_url | script_tag }}

Antworten:

3 für die Antwort № 1

Hast du <body class="off-canvas hide-extras"> bereits?

Dieser Code: <script> document.write("<script src=/" + ("__proto__" in {} ? "zepto" : "jquery") + ".js></script>"); </script> Lädt Zepto (jquery-kompatible Bibliothek). Wenn zepto nicht unterstützt wird (IE), wird jquery geladen. Genau wie ein Fehlerbehebungsschritt würde ich versuchen, zu entfernen <script> document.write("<script src=/" + ("__proto__" in {} ? "zepto" : "jquery") + ".js></script>"); </script> und {{ "zepto.js" | asset_url | script_tag }} und importiere jquery vielleicht mit {{ "jquery.js" | asset_url | script_tag }}

Ich habe gerade einen Blick auf offcanvas.js geworfen. Es ist nicht so seltsam, da es ein paar Methoden aufruft, die in zepto nicht verfügbar sind. Es ruft scrollTop zum Beispiel auf. Verwenden Sie jQuery und es wird gut funktionieren.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen