햄버거 메뉴 바꾸기

저 클래스 컨텍트를 클릭할떄마다 햄버거 메뉴가 번형이 됬다 안됬다 하고 싶습니다.

위 라벨이 햄버거 메뉴 입니다. 생각했던것보다 잘 안되네여

 스크립트는 이런식으로 되어있습니다.  

  var bring_nav = function () {                 $('.content').toggleClass('content__move');                 $('nav').toggleClass('nav__move');             };

            var go_to_section = function () {                 var id = $(this).attr('class');                 $('section').removeClass('section_open');                 $('section#' + id).addClass('section_open');                 bring_nav();             };             var transform

            $(document).ready(function () {                 $('.toggle').on('click', bring_nav);                 $('nav').find('button').on('click', go_to_section);             });         })

css 입니다

label .hamburger {   position: absolute;   top: 135px;   left: 50px;   width: 30px;   height: 2px;   background: #000;   display: block;   -webkit-transform-origin: center;           transform-origin: center;   -webkit-transition: .5s ease-in-out;   transition: .5s ease-in-out; } label .hamburger:after, label .hamburger:before {   -webkit-transition: .5s ease-in-out;   transition: .5s ease-in-out;   content: "";   position: absolute;   display: block;   width: 100%;   height: 100%;   background: #000; } label .hamburger:before { top: -10px; } label .hamburger:after { bottom: -10px; } label input { display: none;}

label input:checked + .menu .hamburger {   -webkit-transform: rotate(45deg);           transform: rotate(45deg); } label input:checked + .menu .hamburger:after {   -webkit-transform: rotate(90deg);           transform: rotate(90deg);   bottom: 0; } label input:checked + .menu .hamburger:before {   -webkit-transform: rotate(90deg);           transform: rotate(90deg);   top: 0; }