제이쿼리에서 제일 많이 쓰는 메서드 암기!
addClass('on act') <-> removeClass() // 둘이 합쳐진 것이 toggleClass('on')
$('img').attr('src', 'logo.jpg'); // 모든 이미지를 logo.jpg로 바꿔라오늘의 미션
- 반드시 서버 업로드한 주소 (절대 Live Server로 보지마)
모든 소스는 서버 절대경로 /로 시작해야함- 제이쿼리 2.X 버전
- 부트스트랩 4.6으로 + 가급적이면 자신의 하드코딩 스타일이 적어야함
-> 커스터마이징이 많을수록 모바일 작업이므로 계속해서 양이 늘어나기 때문- 자바스크립트 햄버거버튼 완성하기 (스타일처리_트랜지션 색상, 애니메이션 등)
- 네비게이션 제목 선정
- 각 섹션의 타이틀 매치시킬 것 (자바스크립트)
- 하나의 섹션당 높이가 반응형 처리가 돼야 함 (=매체 높이만큼 =100vh)
데스크탑, 가장 작은 사이즈 1280 ~1980 까지 검수해야
-> 분기점 : 320(아이폰 소형) / 768(태블릿) / 992 / 1024 (아이패드) / 1280 이상 / ~1980 까지
-> 폰트 (미디어 쿼리 작업)
max
360이하 / px (vw NO)
768이하 / px
768이상~1024까지 / vw
1024이상 / px
1280이상 / px
1. HTML + CSS로 햄버거버튼 삽입
+) 폰트어썸보다 하드코딩 추천! 폰트는 애니메이션이나 색상 지정이 어렵.
i 태그 썼다가, 고객 요청이 있어 바꾸려면 코드를 다 다 뒤집어야 함.
1-1. < button #allMenu > 안에 < span > 자리 만들기
1-2. 햄버거버튼과 ul 네비의 관계 (d-md-none d-md-flex)
- header 클래스 d-flex justify-content-between align-items-center
<header id="nav" class="d-flex justify-content-between align-items-center">
<h1"><a href=""><img src="/img/logoCap.svg" alt=""></a></h1>
<button id="allMenu" class="d-md-none">
<span></span>
</button>
<ul class="depth1 d-none d-md-flex">
<li class="depth2"><a href="#sec1">섹션1</a></li>
<li class="depth2"><a href="#sec2">섹션2</a></li>
<li class="depth2"><a href="#sec3">섹션3</a></li>
<li class="depth2"><a href="#sec4">섹션4</a></li>
</ul>
</header>- button 클래스 d-md-none ( md 사이즈부터 사라질게 )
- ul 클래스 d-none (없다가) d-md-flex ( md 사이즈부터 나타나서 옆에 붙을게 )
1-3. 삼지창 버튼 만들기
1-3-1) 버튼 영역 transparent
<button id="allMenu" class="d-md-none">
<span></span>
</button>
1-3-2) span 영역 높이 2px 지정 -> 선처럼 보이도록
1-3-3) before after 사용해 -> 3개의 선처럼 보이도록
1-3-4) 추가로 위치 조정해주기
전체 CSS 코드
1-4. HTML로 #nav 반응형 처리
1-4-1) header 클래스 추가 : px-3 px-md-5
<header id="nav" class="d-flex justify-content-between align-items-center px-3 px-md-5">
<h1"><a href=""><img src="/img/logoCap.svg" alt=""></a></h1>
<button id="allMenu" class="d-md-none">
<span></span>
</button>
<ul class="depth1 d-none d-md-flex">
<li class="depth2"><a href="#sec1">섹션1</a></li>
<li class="depth2"><a href="#sec2">섹션2</a></li>
<li class="depth2"><a href="#sec3">섹션3</a></li>
<li class="depth2"><a href="#sec4">섹션4</a></li>
</ul>
</header>
1-4-2) h1 클래스 추가 : col-2 col-sm-3 col-md-2
1-4-3) a 태그 & img 태그 클래스 추가
2. 제이쿼리로 햄버거버튼 토글 처리
제이쿼리 토글 기능
addClass('on act') <-> removeClass()
// on act 클래스 추가<-> 클래스 모두 제거
// 둘이 합쳐진 것이 toggleClass('on')제이쿼리
<script>
$('#allMenu').click(function(){
$(this).toggleClass('open'); // #allMenu에 open 클래스 추가/제거
})
</script>
CSS
HTML + CSS로 햄버거버튼 삽입한 이후 → 햄버거 버튼 클릭한 이후의 효과를 지정
햄버거 버튼을 클릭하면 -> 메뉴 ' .open '
(1) 가운데 스판 없애고
(2) 햄버거버튼 rotate 시켜서 X자 만들기
<style>
/* --- 햄버거 버튼 클릭 시, 메뉴 open 들어갔다 나갔다 toggle --- */
/* (1) 가운데 스판 없애고 */
#allMenu.open span{ display: none; }
/* (2) 햄버거버튼 크로스 시켜서 X자 만들기 */
#allMenu.open:after{
transform: rotate(-45deg);
}
#allMenu.open:before{
transform: rotate(45deg);
}
</style>
(3) open이 열리면 -> 동생 ul이 나타나며, 아래와 같은 속성 가짐
<style>
/* --- 햄버거 버튼 클릭 시, 메뉴 open 들어갔다 나갔다 toggle --- */
/* (3) open이 열리면 -> 동생ul이 나타나며, 아래와 같은 속성 */
#allMenu.open + .depth1{
display: block !important;
position: absolute;
background-color: black;
left: 0;
right: 0;
padding: 20px;
top: 100%;
}
#allMenu.open + .depth1 a{ color: white;}
</style>
결과물
전체 코드
<style>
li{ list-style: none;}
*{ margin-bottom: 0; }
/* ---------- 햄버거 버튼 생성 ------------ */
#allMenu{
width: 2rem;
border: 0;
background-color: transparent;
padding: 0;
position: relative;
}
#allMenu span{
display: block;
height: 2px;
background-color: black;
margin: 11px 0;
}
#allMenu:after,
#allMenu:before{
content: "";
display: block;
position: absolute;
height: 2px;
background-color: black;
left: 0;
width: 100%;
}
#allMenu:after{
bottom: 0;
}
#allMenu:before{
top:0;
}
/* --- 햄버거 버튼 클릭 시, 메뉴 open 들어갔다 나갔다 toggle --- */
/* (1) 가운데 스판 없애고 */
#allMenu.open span{ display: none; }
/* (2) 햄버거버튼 크로스 시켜서 X자 만들기 */
#allMenu.open:after{
transform: rotate(-45deg);
}
#allMenu.open:before{
transform: rotate(45deg);
}
/* (3) .open 열리면 -> 동생ul이 나타나며, 아래와 같은 속성을 가짐 */
#allMenu.open + .depth1{
display: block !important;
position: absolute;
background-color: black;
left: 0;
right: 0;
padding: 20px;
top: 100%;
}
#allMenu.open + .depth1 a{ color: white;}
</style>3. 스크롤탑
3-1. 제이쿼리 토글 추가
if( $(window).scrollTop() > 0 ) 윈도의 스크롤탑 위치값 0보다 크면(=스크롤 내리면)
- $('#nav').addClass('scroll') : .scroll 추가 (배경색 주기 + 글자색 변경)
- $('#nav').removeClass('scroll') : .scroll 추가 (배경색 빼기)
<script>
$(document).ready(function(){ // 페이지가 열리면 실행
$(window).scroll(function(){
if( $(window).scrollTop() > 0 ){ // 윈도의 스크롤탑 위치값이 0보다 크면 (스크롤을 내리면)
$('#nav').addClass('scroll'); // .scroll 추가 (배경색 주기 + 글자색 변경)
}else{
$('#nav').removeClass('scroll'); // .scroll 추가 (배경색 빼기)
}
})
});
</script>
3-2. 스크롤 위치값 = 0일 때
3-3. 스크롤 위치값 > 0일 때, 클래스 scroll 추가
- 이제 스타일 지정할 수 있다 ex) 배경색, 글자색, 트랜지션 등
3-4. 햄버거 버튼 스크롤링 시, 스타일 추가
<style>
/* ---------- 햄버거 버튼 스크롤링 ---------- */
/* --- 스크롤 먹었을 때 #nav의 배경색 지정 -- */
.scroll #nav{
background-color: rgba(225, 225, 225, 0.7);
}
.scroll #nav a{
color: white;
}
/* scrollTop=0일때, #nav 배경색 지정 */
#nav{
outline: 0;
border: 0; background-color: transparent;
font-size: 2.5rem;
}
</style>
tip) #nav가 아니라, body에 scroll 클래스를 toggle 하라
그러면 body로 (나중에) 스크롤 먹은 하단 SNS 버튼 등등 한꺼번에 조종 가능
