滚动关闭推送菜单

时间:2017-01-05 09:59:47

标签: javascript jquery html css

当使用滚动时,如何关闭推送画布菜单?或点击它。

下面是HTML和Jquery。提前谢谢!

$(document).ready(function() {
  $menuLeft = $('.pushmenu-left');
  $nav_list = $('#nav_list');

  $nav_list.click(function() {
    $(this).toggleClass('active');
    $('.pushmenu-push').toggleClass('pushmenu-push-toright');
    $menuLeft.toggleClass('pushmenu-open');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
  <div class="menu-primary-container">

    <ul id="menu-primary" class="menu">
      <li><a href="http://10.0.0.127:8888/page16-sass/">Home</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/creative/">Creative</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/online/">Online</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/print/">Print</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/the-studio/">The Studio</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/work/">Our Work</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/snippets/">Snippets</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/blog/">Blog</a></li>
      <li><a href="http://10.0.0.127:8888/page16-sass/contact/">Get in touch</a></li>
    </ul>
  </div>		

  <div class="mobile-phone">01268 271 858</div>
</nav>

1 个答案:

答案 0 :(得分:0)

滚动推送你的pushmenu类。

<div class="popular-video">
    <h2>Popular</h2>
    <ul>
        <?php foo(); ?>
    </ul>
</div>

如果用户在选择菜单项之前意外滚动(可能在触摸设备上发生),您可能需要添加计时器以防止菜单滚动。