왼쪽 사이드 패널을 접는 방법?

Question

왼쪽 측면 패널 붕괴를 만들 방법을 찾고 있습니다. 나는 움직이거나 조정할 다른 것을지도/사이트에두고 싶지 않습니다. 왼쪽 패널을 접을 수 있습니다. 슬라이딩 애니메이션을 사용하는 것이 이상적입니다.

대단히 감사하겠습니다!

Answer 1

left 속성의 CSS transition으로이 값을 변경하면이 값을 부드럽게 애니메이트 할 수 있습니다. 그런 다음 left 값을 변경하는 클래스를 추가 및 제거하여 사이드 바의 가시성을 전환합니다.

.left-side-bar { 
    transition: left .8s ease-in; 
} 

.left-side-bar.is-out { 
    left: -16.666%; /* equal to the sidebar's width */ 
} 

기본적으로 표시됩니다. is-out 클래스를 추가/제거하려면 JavaScript를 사용하여 숨 깁니다.

Answer 2

가장 먼저 할 일은 멋진 글꼴을 얻기 위해 글꼴 굉장과 같은 API를 사용하는 것입니다. 당신은 다음 cdn에 의해 jQuery로 추가 할 수 있습니다.

$('head').append('<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">'); 

그런 다음 사업부를 만들고, 햄버거를 개최 CSS는 BS 숨겨진 LG 전자, 숨겨진 MD, 숨겨진-SM을 사용하여 표시. 전화보다 더 큰 것을 숨기려면. 이것은 이렇게 보일 것입니다.

<div class="mobile_bars hidden-lg hidden-md hidden-sm"> 
<button id="hide_menu"> 
<i class="fa fa-bars" aria-hidden="true"></i> 
</button> 
</div> 

jQuery를 통해 추가하거나 단순히 html에 추가 할 수 있습니다.

이 요소를 수용하려면 사이트 CSS에 다음 CSS를 추가하십시오.

<style> 
.mobile_bars { 
    margin-left: 262px; 
    margin-top: -32px; 
} 

/* 참고 *이 같은 CSS를 작성할 필요가 없습니다, 의미는

.left-side-bar.is-out */ 

.push-in { 
left: -16.666%; /* equal to the sidebar's width */ 
} 

</style> 

그런 다음 @keithjgrant 코드를 사용하여 스크립트를 작성 jQuery로 추가합니다.

<script> 
// Include Ready function 
ALL is .TOUCH deprecated?? 
$('button#hide_menu').on(function(){ 

$('.left-side-bar').toggle('push-in animated fadeOutLeft'); 

// For some fun add animated.css to your header and add the following classes as well, 

또는 https://daneden.github.io/animate.css/ 클래스를 선택하십시오!

}); 

<script> 

이것은 내 최종 결과가 아니지만 가까운 경우에 표시됩니다. 또한 모바일 웹 사이트에 대한 솔루션으로 이것을 원한다고 가정하고 있지만이 데스크톱 옵션 ID를 사용하려는 경우 단순히 아이콘을 변경하거나 로고 오른쪽에 왼쪽 화살표 아이콘을 추가하십시오. 눈에 보이지만 어딘가에 있습니다!