사이드 바 메뉴 접기

내 사이트의 관리자 패널을 만들고 있는데 햄버거 아이콘에 숨기고 메뉴를 클릭 할 때 사이드 바 메뉴가 필요합니다. 나는 해결책을 찾고 있었지만 많이 찾지 못했습니다. 너희들이 내 문제를 도와 주길 바랐다. 이 같은사이드 바 메뉴 접기

.sidebar{ 
    @include flexbox(); 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: center; 
    text-align: center; 
    flex: 0 0 18%; 
    min-height: 100%; 
    margin: 0; 
    background-color: $oc-gray-9; 
    a{ 
    display: block; 
    width: 87.25%; 
    text-align: left; 
    padding-left: 5vh; 
    text-decoration: none; 
    color: $oc-gray-6; 
    font-weight: bold; 
    text-transform: uppercase; 
    line-height: 10vh; 
    font-family: CaviarDreams; 
    font-size: 1.15vw; 
    } 
    a:hover{ 
    background-color: $oc-red-9; 
    color: $oc-gray-2; 
    .menu-img { 
    opacity: 1; 
    } 
    } 
    .logo-img{ 
    width: 90%; 
    height: auto; 
    } 
    .menu-img { 
    width: 7%; 
    height: auto; 
    } 

}

및 HTML : :이 같은 코드 플렉스 사이드 바 메뉴를 가지고

<div class="sidebar"> 
<img src="logo.png" class="logo-img"> 
    <a class="hvr-fade" href="index.php"><img src="dash.png" class="menu-img"> Dashboard</a> 
    Other code here.... 
</div>

나는이 작업을 수행 할 수있는 방법 어떤 아이디어?

감사합니다. jQuery를 사용

출처

2017-12-11 Vlado Gál

코드 조각 또는 코드가 코드 조각에서 작동하지 않는 것을 만들 수 있습니까? 적어도 필요한 출력을 생성하는 기능 코드를 제공하십시오. –

$(document).on('click', '.<your hamburger icon class>', function(){ 
    $('.sidebar').slideToggle(); 
})

이 그것을 내 사이드 바 NAVS의 대부분에 무엇을 사용 트릭을해야한다.

이전에 사용하지 않은 Jquery는 매우 간단합니다. 하지만 DOM 조작이 정말 쉽습니다. 기본적으로 이벤트 처리기를 햄버거 클래스에 바인딩 한 다음 햄버거를 클릭 할 때마다 사이드 바를 전환하는 기능을 실행합니다.

출처

2017-12-11 15:53:44 Reed

사이드 바 메뉴 접기

답변

관련 문제