안녕하세요~! max-width 899px2 강의 문의 드립니다!
mobile menu layout 에서요 햄버거 버튼을 누르면 메뉴들이 뜨고 그 메뉴를 눌렀을 때 그 화면으로 가고 창이 닫히게 하고 싶은데 어떻게 하면 될까요..??ㅜㅜ script 독학중이라 많이 어렵네용,,
답변 1
2
강의에서 스크립트를 포함하고 있지 않지만, 일단 javascript로 진행하실거면.
html에서는
각 섹션마다 id="s0" ,s1,s2..이런식의 이름을 넣어주고,
html에 필요 plugin 리소스를 넣어줍니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
scirpt에서는
const NAV_LIST = document.querySelectorAll('.nav li');
let section = document.querySelectorAll('section');
NAV_LIST.forEach(function (btn, index) {
btn.addEventListener('click', function () {
gsap.to(window, {
duration: 1,
scrollTo: {
y: '#s' + index
}
})
})
})
요런식으로 작성하시면 될 거 같습니다. ^^ 버튼을 클릭하면 현재 내가 누른 버튼의 순서값을 index로 받고 내가 클릭한 버튼은 btn 매개변수로 받아냅니다. gsap scrollTo를 이용해 각 색션 이름에 id의 순번에 index를 대입해 duration:1(1초)로 이동하게 합니다.
꼭 완성하시길 , 화이팅입니다.^^
ReactScriptExample 관련 질문
0
11
1
class 이름을 section__title이라고 짓는 것에 대해서
0
15
2
수업자료와 노션 공유 문제
0
36
3
'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.
0
57
2
경력기술서는 어떤 방향이 좋을까요?
0
54
2
왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?
0
76
3
어플리케이션 실행 후 에러에 관하여 질문 드립니다.
2
62
2
26,27강 진행 간 노션, html 프롬프트 파일 불일치
0
69
3
<div id="banner">배너 이미지</div> 관련 질문
0
35
1
변수 설정 시에 질문입니다.
0
41
2
설치 및 설정 가이드 노션 자료는 없나요 ?
0
49
2
counter01.html은 어디있을까요?
1
31
1
수업자료 문의
0
43
2
part3. spy 쪽 / part3,part4 강의자료
0
60
2
최종 코드
0
64
2
Open AI 결제
0
79
2
figma 파일을 받을 수가 없어요
0
65
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
67
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
62
2
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
121
1
구글 서치콘솔 도메인 소유권 확인 실패
0
72
2
동영상 보는 웹페이지에 강의 web-book 보는 방법 알려주세요
1
189
2
css background-image 적용이 안 돼요
1
537
1
max-width:1199px 강의 앞부분이 궁금합니다.
2
463
1