(HTML/SCSS/jQuery) 애니메이션 모바일 탐색 메뉴 만들기 2023년 02월 16일 by issue 메뉴(햄버거 버튼) 클릭 시 스와이프 탐색을 위한 모바일 GNB 코드입니다. 닫기 버튼 애니메이션 작업이 완료되었습니다. 당신이 주면 '추천 관련글, 소셜 미디어 마케팅을 수행하는 방법을 알아보십시오!2023 콜랜드 제원 컬러 가격 연비 특징 리뷰시즌2 한건규의 활약과 럭비 오디션 결과를 합치면 된다.(95회) 이야기가 흐르다 - 서울 강동구 영역은 클래스를 통해 왼쪽 -100%에서 0%로 이동하며 슬라이드됩니다. 여기에 트랜지션을 적용하는 것은 당연합니다. 닫기 버튼은 스팬으로 구성되어 메뉴 버튼에서 닫기 버튼으로 변형될 수 있도록 변형된다. 하지만 SCSS를 사용하다 보니 CSS로 스타일링하는 것이 너무 번거롭습니다. SCSS편의왕! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4px, 6px);-webkit-transform:rotate(45deg) translate(4px, 6px);} &:nth-of-type(2) {opacity:0;} &:nth-of-type(3) {transform:rotate(-45deg) translate(4px, -6px);-webkit-transform:rotate(-45deg) translate(4px, -6px);} } } } 위와 같이 중첩을 많이 하면 코드가 조금 어려워 보일 수 있지만 익숙해지면 훨씬 깔끔해집니다. // GNB $('.btn_gnb').click(function(){ if($(this).hasClass('btn_gnb_close')) { $(this).removeClass('btn_gnb_close'); $('#gnb').removeClass('on'); } else { $(this).addClass('btn_gnb_close'); $('#gnb').addClass('on'); } }); 메뉴 버튼을 클릭하면 내비게이션이 열리고 btn_gnb_close 클래스가 추가됩니다. 탐색 및 닫기 버튼 활성화 클래스를 제거하고 반대의 경우 addClass는 기능을 작동시킵니다. 펜을 봐 모바일 탐색 메뉴 애니메이션 (@wimmwell) 존재하다 코드 펜.
