mnb 3
[jQuery] 햄버거 메뉴 만들기 4 - animate()
안녕하세요. 플입니다. 오늘은 햄버거 메뉴 만들기 마지막 포스팅입니다. 1. fadeIn() 2020/05/12 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 3 - fadeIn() fadeIn()은 이전 포스팅에서 확인해주세요~ 2. 전체 코드 $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) $('.exit').click(function(){ $('.mnb button').fadeIn(); $('.mnb_inner').animate({ marginRight : '-40%' }, 1000 ); }) 먼저 햄버거 만들기 1부터 전체 코드를 ..
[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..
[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..