전체 화면 오버레이 스타일 및 효과 수정 방법

Question

탐색 메뉴 링크를 클릭하고이 효과를 트리거 한 버튼을 원래 상태로 되돌려 놓은 후 오버레이 효과를 사라지게하려고합니다.

이 당신이 그것을 어떻게 달성 할 수있는 링크를 누른 후 사라 나던 오버레이를 연 후 발견으로이 http://tympanus.net/Development/FullscreenOverlayStyles/#

을 무엇입니까?

는이 코드의 작업 종류를 수행하지만 버튼이는 'X'아이콘이 때 메뉴 아이콘 대신에서만 작동 할 수 적용된 잘못된 작용을

$('#overlay-menu ul li a').click(function(){ 
    $("#overlay").slideUp("fast"); 
    $(".button_container").removeClass("active"); 

}); 

$('.button_container').click(function(event){ 
    $("#overlay").slideDown("fast"); 
    $(".button_container").removeClass("active"); 

}); 

시도 .

JSFIDDLE

http://jsfiddle.net/HT9Bx/566/

미안 실제 링크는 어떤 이유로 보여 해달라고하지만 중심 위에 마우스를 올려 경우는 커서가 활성화되어 볼 수 있습니다. 그렇다면 어떻게하면 메뉴 버튼에 올바른 아이콘이 표시되는지에 따라 오버레이를 닫고 열 수 있습니다.

희망이 있었는데, 설명하기가 꽤 어려웠습니다. 그러나 당신이 jsfiddle로 주위를 둘러 보면, 링크가 오버레이의 중심에 있다고 가정합니다.

Answer 1

동일한 요소에 대해 세 번의 클릭 이벤트가 있으므로 주석 $(".button_container").removeClass("active");

$('#overlay-menu ul li a').click(function(){ 
    $("#overlay").slideUp("fast"); 
    //$(".button_container").removeClass("active"); 
}); 

$('.button_container').click(function(event){ 
    $("#overlay").slideDown("fast"); 
    //$(".button_container").removeClass("active"); 
}); 

$('#toggle').click(function() { 
$(this).toggleClass('active'); 
$('#overlay').toggleClass('open'); 
}); 

Demo