버튼을 클릭하면 Div가 왼쪽에서 슬라이드합니다.

Question

그림이 내가하는 것보다 더 잘 설명합니다.

내가 그것을 클릭하기 전에 - screenshot1

후 : screenshot2

그것은 윈도우의 측면에 고정 버튼 그리고 그것은 클릭 할 때 그것을 밖으로 슬라이드.

나는 웹을 오랫동안 찾고 있었으며 해결책을 찾을 수 없었다. 너 나 좀 도와 줄래?

Answer 1

코드는 당신을 도울 수 있습니다.

HTML

<section id="hiddenPanel" class="txt-highlight-color bg-color bg-pattern"> 
    <span id="close-bar" class="myButton"> < </span> 
</section> 

CSS

#hiddenPanel {position:fixed; top:0; right:-200px; width:200px; background-color:grey; height:250px;} 
#close-bar { position:absolute; left:-20px; background:red; color:white; width:20px; height:250px;} 

jQuery를 코드

var speed = 300; 
    $('#close-bar').on('click', function(){ 

     var $$ = $(this), 
      panelWidth = $('#hiddenPanel').outerWidth(); 

     if($$.is('.myButton')){ 
      $('#hiddenPanel').animate({right:0}, speed); 
      $$.removeClass('myButton') 
     } else { 
      $('#hiddenPanel').animate({right:-panelWidth}, speed); 
      $$.addClass('myButton') 
     } 

    }); 

기본적으로

http://jsfiddle.net/Rxsd5/

Answer 2

내가 그러나 내가 CSS를위한 코드를 부여, JQuery와에서 할 .. 내가 우리 클릭 대신 에드 호버. 그리고이 CSS 값을 변경하고 그걸 가지고 노십시오.

<div class="wrapper"> 
    <div id="slide"> 
    //content or form goes here.. 
    </div> 
</div> 

.wrapper { 
    position: relative; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 

#slide { 
    position: absolute; 
    left: -100px; 
    width: 100px; 
    height: 100px; 
    background: blue; 
    transition: 1s; 
} 
.wrapper:hover #slide { 
    transition: 1s; 
    left: 0; 
}