CSS3 transform translate 트랜스폼 위치값을 활용한 스플릿 메뉴 만들기
수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. 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 외에도 다양한 애니메이션 변형이 있습니다. 아래에 관련글이 있으니 꼭 한번 읽어보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
