친절한효자손 취미생활

CSS3 transform translate 트랜스폼 위치값을 활용한 스플릿 메뉴 만들기

2018. 12. 16. 00:02

에디터에게 힘이 되어 주세요. 애드블록은 광고쟁이들에게 사용해 주세요!

수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다.



See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen.


먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니다. 저 메뉴 위에 마우스를 올려다 놓으면 새로운 메뉴2가 위로 올라오는것을 확인하실 수 있습니다. 그러면 HTML 부터 살펴보시겠습니다.


<nav>

    <ul>

        <li>

            <div>

                <a href="#">MENU1</a>

                <a href="#">MENU2</a>

            </div>

        </li>

        <li>

            <div>

                <a href="#">MENU1</a>

                <a href="#">MENU2</a>

            </div>

        </li>

        <li>

            <div>

                <a href="#">MENU1</a>

                <a href="#">MENU2</a>

            </div>

        </li>

        <li>

            <div>

                <a href="#">MENU1</a>

                <a href="#">MENU2</a>

            </div>

        </li>

    </ul>

</nav>


구조는 간단합니다. 다만 li 태그 안쪽에 한번 더 div로 감쌌습니다. 그 안쪽에는 a 태그가 두개 들어있습니다. 이 두개를 블록으로 만들어서 세로로 쌓고, 하나의 직사각형 형태를 div로 만들어주는 것 입니다. 그리고 li에 overflow: hodden; 을 주어서 div의 반만 보이게 하고 나머지 부분을 가려줄 것입니다. 마지막으로 마우스를 li에 올리면, div가 반 정도 위로 올라가게만 만들면, 최종적으로는 이렇게 스플릿 형태의 애니메이션 효과가 나타나게 되는 것 입니다. 다음은 CSS3 상태 입니다.


/*RESET*/

* { margin: 0; padding: 0; }

body { font: 17px 'Nanum Gothic', sans-serif; }

a { text-decoration: none; color: #404040; }

li { list-style: none; }



/*BODY*/

nav {

    width: 800px;

    height: 50px;

    margin: 0 auto;

}


nav ul {

    overflow: hidden;

    width: 100%;

}


nav ul li {

    overflow: hidden;

    float: left;

    width: 25%;

    height: 50px;

    text-align: center;

    line-height: 50px;

}


nav ul li:hover div {

    transform: translateY(-50px);

}


nav ul li div {

    width: 100%;

    height: 100px;

    transform: translateY(0);

    transition: all 0.5s;

}


nav ul li div a {

    display: block;

    width: 100%;

    height: 50px;

    font-size: 17px;

    color: #fff;

    background: #555;

}


nav ul li div a:last-child {

    font-size: 22px;

    font-weight: bold;

    color: yellow;

    background: #555;

}


여기에서 중요한건 transform: translateY(-50px); 이 부분입니다. 이녀석이 현재 a를 감싸주는 div를 위로 반 올라가게 합니다. translateY 이므로 Y축으로의 이동이고, -50px 이니 위로 50픽셀 올라가는 샘 입니다. 왜 50픽셀이냐면, a 태그의 세로 크기를 50px로 만들었고, 이게 세로로 두개 쌓여있기 때문에 최종적으로 div의 세로 크기는 100px이 됩니다. 그래서 50px만 움직이게 하면 반만큼 이동하는 것 입니다.


그리고 다시 div 속성에서는 원위치로 오게끔 translateY(0) 을 입력해 두었고, 이 모든 것들을 부드럽게 이동되는 것 처럼 보여지게 하기 위해서 transition 요소를 추가로 넣었습니다. 만약 transition 요소가 없다면, 부드러운 애니메이션 움직임이 아닌, 중간과정이 없이 최종적인 모습만 휙 하고 바뀌게 될 것입니다. 직접 한번 해당 스타일 요소를 제거하거나 주석처리 해보시고 한번 테스트해 보세요.


이미지를 사용한 스플릿 메뉴도 좋지만 현장에서 포토샵의 도움 없이 순수하게 CSS3 만으로도 얼마든지 스플릿 메뉴를 만들 수 있습니다. 잘 기억해 두셨다가 여러가지로 응용해 보시기 바랍니다. transform 스타일에는 translate 외에도 다양한 애니메이션 변형이 있습니다. 아래에 관련글이 있으니 꼭 한번 읽어보시기 바랍니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.