animate를 활용한 상단 메뉴 노출 :: 마이구미

이번 글은 제이쿼리의 animate 메소드의 활용법에 대하여 알아볼 것이다.

이번 주제는 지식인으로부터 팁을 얻었다.

지식인에 질문이 올라왔다.

http://www.kwater.or.kr/main.do?s_mid=1#this

위의 이미지는 첫 로딩 시 기본 페이지이다.

상단부분 오른쪽 돋보기 버튼이 보이는가?

돋보기 버튼을 누른다면 아래 이미지처럼 통합검색이라는 영역이 노출될 것이다.

즉 돋보기 버튼을 누른다면 통합검색 영역이 상단 메뉴 영역이 노출된다.

통합검색 영역의 오른쪽 닫기 버튼을 누른다면 노출된 영역이 사라진다.

직접 페이지에서 해보길 바란다.

많이 볼 수 있고, 많이 활용되고 있는 기능이다.

이거 또한 다른 글 transition으로 가능하다.

여기서는 jquery의 animate 메소드를 사용해보겠다.

html 소스

<div class="totalSearch">
    <div id="close" class="right">닫기</div>
</div>
<div id="wrap">
    <div id="header">
       <div id="search" class="right">검색</div>
    </div>
</div>

클래스명이 totalSearch인 녀석이 돋보기 버튼을 누르면 나올 검색 영역이다.

아이디명이 wrap인 녀석은 전체 메인영역이라고 생각하자.

첫 로딩시에는 당연히 검색 영역이 안 보여야한다.

클릭 시 노출되어야하므로 아래의 css를 보자.

css 소스

.totalSearch {
      height: 61px;
      background: #017EBA;
      width: 100%;
      position: relative;
      top: 0;
      margin-top: -60px;
      display: none;
}

margin-top을 -60px 준 까닭은 클릭 시 바로 노출되는 것이 아니라, 스스륵 내려오기 위함이다.

샘플 페이지에서 클릭 시 개발자 도구에서 보면 -60px이 0px로 서서히 변화하는 것을 볼 수 있다.

여기서 position을 relative로 주었다.

노출되면 항상 가장 상단부분에 위치해야하고, 메인 영역이 그 아래로 노출되기 위해서이다.

abosulte로 지정 시 메인 wrap 영역과 겹쳐버릴 것이다.

이번엔 자바스크립트 소스를 보자.

javascript 소스

$('#search').click(function(){
    $(".totalSearch").animate({
        marginTop: '0px',
        opacity: "show"
    });
})

$('#close').click(function(){
    $(".totalSearch").animate({
        marginTop: '-60px',
        opacity: "hide"
    });
})

click 이벤트를 통해 animate 메소드를 실행시킨다.

위 그대로 검색을 눌렀을 때는 -60px로 설정되었던 margin-top을 0px로,

none으로 설정되었던 display를 block으로 설정해주면 된다.

( 원래는 display: "block" 이겠지만 animate 메소드에서는 opacity: "show"가 그것을 의미한다 )

반대로 닫기 클릭 시에는 원래 설정된 css로 돌아가게 설정해주면 된다.

아래 샘플 페이지를 참고바란다.

샘플 페이지

http://hotehrud.cafe24.com/study/test9.html