(HTML/SCSS/jQuery) 애니메이션 모바일 탐색 메뉴 만들기 2023년 02월 16일 by issue 메뉴(햄버거 버튼) 클릭 시 스와이프 탐색을 위한 모바일 GNB 코드입니다. 닫기 버튼 애니메이션 작업이 완료되었습니다. 당신이 주면 '추천 관련글, 소셜 미디어 마케팅을 수행하는 방법을 알아보십시오!2023 콜랜드 제원 컬러 가격 연비 특징 리뷰(95회) 이야기가 흐르다 - 서울 강동구시즌2 한건규의 활약과 럭비 오디션 결과를 합치면 된다. 영역은 클래스를 통해 왼쪽 -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) 존재하다 코드 펜.
