html - 简单的 Off Canvas 菜单不起作用

Question

我创建了一个简单的主导航，但是当您单击菜单按钮时它不起作用。代码看起来正确，但可能存在我没有看到的断开连接。任何想法将不胜感激。

我工作的网站是:offcanvas.squarespace.com

HTML

<a href="#main-navigation" class="menu-link">MENU</a>

CSS

    #main-navigation.active {
        -webkit-transform: translate(-13.755em, 0px);
        -moz-transform: translate(-13.755em, 0px);
        -o-transform: translate(-13.755em, 0px);
        -ms-transform: translate(-13.755em, 0px);
        transform: translate(-13.755em, 0px);
}

.menu-link {
      position: absolute;
      top: 15px;
      left:10em;
      color:black;
      font-size: 24px;
}

唯

  Y.one('.menu-link').on('click', function(){
  Y.one('#main-navigation').toggleClass('active');
  Y.one('.container').toggleClass('active');

Answer 1

这是我为自己开发的 Canvas 外导航使用的 jQuery。

在我的实现中...我将一个类应用于 body 标签。从那里开始，我所有使导航展开的 CSS 都从 body.off-canvas 开始。这样我就不需要在不同的元素等上切换多个类。

$(document).ready(function() {
    $('#open-nav').click(function() {
        $('#body').toggleClass('off-canvas');
    });
});