[jQuery] 햄버거 메뉴 만들기 3 - fadeIn()

안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 이어서 만들어볼게요. 1. animate() 2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate() 이전 포스팅을 먼저 보고 오면 더 쉬우실 거예요. 2. fadeIn() $('.exit').click(function(){ $('.mnb button').fadeIn(); }) 햄버거 메뉴는 아이콘을 눌렀을 때 메뉴가 나오면서 아이콘이 사라지게 만들어야 해요. 그리고 사라진 아이콘은 메뉴가 없어지면 다시 나타나야 해요. 이번 포스팅에서는 fadeIn()을 이용해 아이콘이 다시 나타나게 만들어볼게요. $('.exit').click(function(){ // x 버튼을 클릭하면 $('.mnb button').f..

coding/JavaScript · 2020. 5. 12. 07:30

[jQuery] 햄버거 메뉴 만들기 2 - animate()

안녕하세요. 플입니다. 오늘은 지난 포스팅에 이어서 햄버거 메뉴를 만들어볼게요. 1. fadeOut() 2020/05/06 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 1 - fadeOut() 이전 포스팅을 같이 올려둘게요. 2. animate() $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) 일단 전체 코드를 보여드리고 시작할게요. 지난 포스팅에 있었던 fadeOut()도 보이네요. 반가워라 바로 아래 animate()로 넘어가 볼게요. $('.mnb button').click(function(){ // 아이콘 클릭할 때 $(this..

coding/JavaScript · 2020. 5. 11. 07:30

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

안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 만들어볼게요. 1. 햄버거 메뉴 햄버거 메뉴란 보통 위의 이미지처럼 가로로 긴 둥근 모서리의 직사각형 모양이 세 개 정도 있는 모양의 메뉴를 말합니다. 모바일이 익숙한 사람은 보자마자 메뉴 버튼이라는 것을 쉽게 알 수 있죠. 모양이 햄버거와 비슷해서 햄버거 메뉴라고도 부릅니다. 기본적인 저런 모양 말고도 다양한 모양이 존재합니다. 원 세 개를 가로로 나열한 모양이라던가 혹은 홈페이지 디자인에 따라 개성 넘치는 모양들이 존재합니다. 오늘은 기본적인 모양으로 만들어봤어요. 2. 햄버거 메뉴 fadeOut 설명에 들어가기에 앞서 코딩은 개인마다 쓰는 방식이 조금씩 다르고, 또한 계속 발전해 나가고 있어요. 만약 이 글을 보는 당신이 지금 제가 알려드리는 코드보다 좀..

coding/JavaScript · 2020. 5. 6. 07:30

[jQuery] this를 이용해 버튼 색 바꾸기

안녕하세요. 플입니다. 오늘은 this를 이용해 클릭한 버튼의 색상을 바꿔보겠습니다. 1. 기본 색상 설정 $(".w_btn li button").css({ background:"#fff2d8" , color:"#065471" }); 먼저 기본 색상을 미리 설정해줍니다. 기본 색상 설정은 css로 설정함으로 css() 메서드를 이용해 배경색과 글자색을 정해줍니다. jQuery에서는 값을 ""(따옴표) 안에 넣어주시고, 각각 구분은 ,(쉼표)를 이용합니다. 2. 클릭한 버튼 색상 변경 $(".w_btn li:eq("+$(this).index()+") button").css({ background:"#065471" , color:"#ffc045" }); 클릭한 해당 버튼의 색을 변경하기 위해서는 this를 ..

coding/JavaScript · 2019. 12. 12. 07:30

[jQuery] 클릭하면 사라지는 더보기 버튼

안녕하세요. 플입니다. 오늘은 더보기 버튼을 클릭하면 사라지게 해 보겠습니다. 1. .click() 메서드 활용 먼저 클릭하면 사라지게 만들 것이니까 click() 메서드를 사용합니다. $(".sub2 .btn").click(function(){ }); ""(따옴표) 안에 있는 것은 더보기 버튼의 클래스명입니다. 클릭을 했을 때 일어날 동작을 적어주어야 하니까 click() 메서드 괄호 안에 함수를 만들어줍니다. 함수는 function(){ }을 적어서 중괄호 안에 원하는 동작을 적어줍니다. 쉽게 말해 click을 했을 때 일어나는 일을 적을 주머니라고 생각해주세요. 2. .fadeOut() 메서드 활용 더보기 버튼이 없어졌습니다. 숨기는 것은 fadeOut() 메서드를 이용해 할 수 있습니다. $("...

coding/JavaScript · 2019. 12. 11. 07:30