냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 플입니다.

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

     


     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

    우당탕탕 좌충우돌 신나는 일상이야기. 톡 떨어진 물감에서 태어난 시트렛은 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가보는 곳 없이 기웃거리며 미끄러��

    ssimplay.github.io

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


     3.  주의

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

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

     

     


     3.  햄버거 메뉴 만들기 2

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

     


     

    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바