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

这是我使用的jQuery，我为自己开发的非画布导航。

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

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

简单的画布菜单不起作用

1 个答案: