간단한 캔버스 메뉴가 작동하지 않음

간단한 기본 탐색 기능을 만들었지 만 메뉴 버튼을 클릭하면 작동하지 않습니다. 코드가 올바르게 보이지만 보이지 않는 연결이 끊어져있을 수 있습니다. 어떤 생각이라도 대단히 감사 할 것입니다.간단한 캔버스 메뉴가 작동하지 않음

내가 일하고 사이트는 다음과 같습니다 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; 
}

YUI

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

출처

2014-04-11 user3370902

활성 클래스가 요소에 적용되지 않는다고 말할 수 있습니다. – Michael

활성 클래스를 요소에 적용하는 방법에 대한 의견이 있으십니까? – user3370902

유이에 대한 경험이 없기 때문에 jQuery로 어떻게 할 수 있습니까? – Michael

이것은 jQuery를 I입니다 캔버스를 벗어난 탐색 도구와 함께 사용 내가 직접 개발 한 것입니다.

내 구현으로 ... 나는 body 태그에 클래스를 적용합니다. 거기에서 네비게이션을 확장시키는 모든 CSS가 body.off-canvas로 시작됩니다. 이 방법을 사용하면 여러 요소를 다른 클래스로 전환 할 필요가 없습니다.

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

출처

2014-04-11 14:43:36 Michael

간단한 캔버스 메뉴가 작동하지 않음

답변

관련 문제