close off canvas menu after click links foundation -
i have set site off canvas menu when goes mobile
<html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> mobile application</title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/foundation.css" /> <link rel="stylesheet" href="css/custom.css" /> <link rel="stylesheet" href="css/custom-mobile-portrait.css" /> <link rel="stylesheet" href="css/custom-mobile-landscape.css" /> <link rel="stylesheet" href="css/custom-xlarge.css" /> <link rel="stylesheet" href="css/custom-ipad.css" /> <link rel="stylesheet" href="css/custom-ipad-portrait.css" /> <link rel="stylesheet" href="css/font-sizes.css" /> <link href='http://fonts.googleapis.com/css?family=muli' rel='stylesheet' type='text/css'> <script src="js/vendor/modernizr.js"></script> <a name="head"></a> </head> <body> <div class="off-canvas-wrap mobile-menu" data-offcanvas> <div class="inner-wrap"> <nav class=" tab-bar hidden-for-large-up" data-topbar "> <section class="left-small "> <a class="left-off-canvas-toggle menu-icon " href="# "><span></span></a> </section> <section class="middle tab-bar-section "> <a href="http://mysite.url "> </a> </section> </nav> <aside class="left-off-canvas-menu "> <ul class="off-canvas-list "> <li><label>dehumaniser app</label></li> <li><a href="#top "><strong>top</strong></a></li> <li><a href="#overview "><strong>app overview</strong></a></li> <li><a href="#how "><strong>how work</strong></a></li> <li><a href="#features " ><strong>features</strong></a></li> <li><a href="#gallery "><strong>gallery</strong></a></li> </ul> </aside> <!-- <aside class="right-off-canvas-menu "> <ul class="off-canvas-list "> <li><label>users</label></li> <li><a href="# ">hari seldon</a></li> <li><a href="# ">...</a></li> </ul> </aside> --> <section class="main-section "> i put site content in here , after code finishes:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="js/vendor/fastclick.js"></script> <script src="js/foundation.min.js"></script> <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.offcanvas.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" /> <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> <script src="js/myscript.js"></script> <script src="js/foundation/foundation.topbar.js"></script> <script src="js/foundation/foundation.orbit.js"></script> <script src="js/myscript.js"></script> <script type="text/javascript"> jquery(document).ready(function() { jquery('.single-item').slick(); }); </script> <script type="text/javascript"> jquery(document).foundation() </script> </section> <a class="exit-off-canvas"></a> </div> </div> <script> jquery(document).foundation(); jquery('a.left-off-canvas-toggle').on('click', function() { }); </script> <div id="fixedbutton"> <a href="#head"><img src="img/upbutton.png"> </a> </div> </body> </html> i proper off canvas behavior (i 3 lines box . when click box opens, , off-canvas menu appears) when click menu link though page scrolls smoothly down off-canvas menu doesn't close. how can fix this?
try add these lines script
$(document).foundation({ offcanvas : { close_on_click : true } });
Comments
Post a Comment