Zurb Foundation 5 offcanvas not working

问题

I'm trying to implement an offcanvas to a site using zurb's foundation framework, for mobile viewing, and just copied the code for it from the documentation, but it just doesn't work.

the code is the following:

<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<script>
    $(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>

Am I doing something wrong?

回答1:

In some instances this can be fixed by supplying the HTML data attribute data-offcanvas

  <div class="off-canvas-wrap" data-offcanvas>

See this fiddle for the working changes to your markup: http://jsfiddle.net/vooaqtxt/

回答2:

I have replicated the problem, and found that moving jquery, foundation.min.js resources and the initialization call:

$(document).foundation();

to just before the closing </body> tag fixed the problem (leave modernizr.js in the head).

Edit: As @Jigar pointed out offcanvas.js does not need to be loaded externally.

p.s. In just about every case, it's best to place all your script references at the end of the page, just before </body>

回答3:

Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.

For it to work now, the trigger javascript needs to be put:

or at the end of the <body> tag as it said in the docs, like Daniel said
or inside the <head> this way (using JQuery):

<script> $(window).bind("load", function () { $(document).foundation(); }); </script>

回答4:

Update to Foundation 5.0.3 and your code should work fine again.

回答5:

You are missing the href="#" on your toggle button link

If the href="#" is missing, it will not work on mobile devices.

This is what your nav should look like:

<nav class="tab-bar show-for-small">
    <a class="left-off-canvas-toggle menu-icon" href="#">
        <span>Foundation</span>
    </a>
</nav>

来源：https://stackoverflow.com/questions/20792459/zurb-foundation-5-offcanvas-not-working

标签

zurb-foundation