[jQuery] 햄버거 메뉴 만들기 1 - fadeOut()

안녕하세요. 플입니다.

오늘은 햄버거 메뉴를 만들어볼게요.

 

---

 1.  햄버거 메뉴

햄버거 메뉴란 보통 위의 이미지처럼 가로로 긴 둥근 모서리의 직사각형 모양이 세 개 정도 있는 모양의 메뉴를 말합니다.

모바일이 익숙한 사람은 보자마자 메뉴 버튼이라는 것을 쉽게 알 수 있죠.

 

모양이 햄버거와 비슷해서 햄버거 메뉴라고도 부릅니다.

기본적인 저런 모양 말고도 다양한 모양이 존재합니다. 원 세 개를 가로로 나열한 모양이라던가 혹은 홈페이지 디자인에 따라 개성 넘치는 모양들이 존재합니다. 오늘은 기본적인 모양으로 만들어봤어요.

 

---

 2.  햄버거 메뉴 fadeOut

 

설명에 들어가기에 앞서 코딩은 개인마다 쓰는 방식이 조금씩 다르고, 또한 계속 발전해 나가고 있어요.

만약 이 글을 보는 당신이 지금 제가 알려드리는 코드보다 좀 더 쉽고 간편하고 깔끔한 코드를 발견했다면 

이 낡은 방법은 지워버리고 바로 당신이 알아낸 멋진 코드를 활용하세요. 

 

 

/* 햄버거메뉴 클릭 */
$('.mnb button').click(function(){
        
     $(this).fadeOut();
        
})

 

그럼 본격적으로 햄버거 메뉴의 jQuery에 들어가 볼게요.

이번 포스팅에서는 jQuery만 다루기 때문에 html과 css는 다루지 않습니다.

 

제이쿼리에 들어가기 전 어떤 동작을 넣을지 잠깐 생각해줍니다. 햄버거 메뉴는 아이콘을 누르면 아이콘이 사라지고 메뉴가 나타나는 동작이 들어가요. 그렇다면 가장 먼저 할 일은 아이콘을 눌렀을 때 사라지는 동작입니다.

 

 

/* 햄버거메뉴 클릭 */
$('.mnb button').click(function(){ // 아이콘을 클릭할 때
        
     $(this).fadeOut(); // 사라진다
        
})

 

$('  ') // 이 부분에는 선택자를 적어줘요. css에서 선택하던 방식과 동일합니다.

 

$('.mnb button') // 그러니 이 부분은 mnb클래스 안의 button이라는 의미죠.

 

.click() // 이 메서드는 클릭을 했을 때 어떤 일이 발생하는지 설정할 수 있어요.

 

.click(function(){  }) // 이렇게 안에 함수를 넣으면 클릭했을 때 함수에 넣은 동작을 처리해줘!라고 명령할 수 있어요.

 

$('this') // this는 나 자신이라는 뜻이에요. 여기서는 .mnb button을 뜻하는 말이겠네요.

 

.fadeOut() // 서서히 사라지는 명령어예요. 영상 효과에서도 쓰이는 말이죠. 

 

 

https://ssimplay.github.io/shinedrop/

shine drop

실제로 적용된 모습이 궁금하시다면 위의 링크에서 확인해주세요.

---

 3.  주의

제이쿼리 사용 시 주의할 점은 위의 이미지에서 체크한 대로 함수 안쪽에 넣어주는 것을 잊지 않는 것입니다.

바깥쪽에서 사용하면 아마 오류가 생겨서 동작이 작동하지 않을 거예요. 

 

 

---

 3.  햄버거 메뉴 만들기 2

2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate()

 

---

 

그럼 이만.

총총.