슬라이더 애니메이션으로 nav 요소를 표시하거나 숨기는 가장 좋은 방법은 무엇입니까?

Question

나는 세 개의 아이콘이있는 고정 된 탐색 사이드 바를 가지고 있습니다. 아이콘을 클릭하면 div (음수 여백으로 숨김)가 슬라이드됩니다. 버튼을 다시 클릭하면 표시된 div가 슬라이드 애니메이션을 통해 숨겨집니다. 이 작업은 다른 두 아이콘에 대해 반복됩니다.

나는 이것을 실행하는 많은 다른 방법이 있다는 것을 알고 있으며, 다양한 의견을 가지고 많은 지원 문서가 나와 있습니다. .animate ({ "left": "+ = 56px"}, "slow")와 함께 .click을 통해 액션을 선언하려 시도했습니다. & 또한 onclick을 실행하는 함수를 작성했습니다. 내가 알기로는이 간단한 작업을 필요한 것보다 훨씬 더 복잡하게 만들 수 있다는 것입니다.

이것을 실행하는 가장 깨끗한 방법에 대한 제안이 있으십니까?

편집 : 모두에게 감사드립니다. Toggle, 자연에서 미니멀리스트는 왼쪽에서 오른쪽으로 이동하지 않습니다. 내가 사용한 스크립트는 다음과 같습니다.

<?// Toolbar ?> 
    <div id="toolbar"> 

     <img src="images/balihooGreyLogo.png" class="logo"/> 

     <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a> 

     <a href="#" class="locationIcon"><img src="images/locationIcon.png" border="0"/></a> 

     <a href="#" class="mediaIcon"><img src="images/mediaIcon.png" border="0"/></a> 

     <a href="#" class="save">SAVE</a> 

     <a href="#" class="export">EXPORT</a> 

    </div> 




    <?// Text Input Slideout Box?> 
    <div class="textInput"> 
     <h1>Email Copy</h1> 

    </div> 
<script> 
$('.textIcon').click(function() { 
    $('.textInput').slideToggleWidth(); 
}); 

jQuery.fn.extend({ 
    slideRight: function() { 
    return this.each(function() { 
     $(this).animate({width: 'show'}); 
    }); 
    }, 
    slideLeft: function() { 
    return this.each(function() { 
     $(this).animate({width: 'hide'}); 
    }); 
    }, 
    slideToggleWidth: function() { 
    return this.each(function() { 
     var el = $(this); 
     if (el.css('display') == 'none') { 
     el.slideRight(); 
     } else { 
     el.slideLeft(); 
     } 
    }); 
    } 
}); 
</script> 

Answer 1

가장 간단한 방법 인 것 같습니다. 접근성을 이유로 음화 텍스트를 숨기는 것으로 가정합니다 (표시 : 없음;). 당신이 이미 그것을하고 있지 않다면 나는 그것을 정리하기 위해 만들 수있는 유일한 제안은 모든 버튼에 대해 작동하는 하나의 기능을 작성하는 것입니다.

$('.icon').click(function() { 
     $(this).next('.nav-item').animate({"left":"+=56px"},"slow"); 
)}; 

당신이보고 할 수 있습니다 또 다른 것은이 코드를 사용하는 스크린 리더로 읽고 원하는 항목을 숨기고에서 일부 진보입니다 : http://snook.ca/archives/html_and_css/hiding-content-for-accessibility (다시 u는 부정적인 답하라 그것을 숨기는 이유 즉 가정) :

.element-invisible { 
    position: absolute !important; 
    height: 1px; width: 1px; 
    overflow: hidden; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
} 

아마도 질문에 대답하는 것보다, 나는 그것을 언급 할 것이라고 생각했습니다.