본문 바로가기

Random Thoughts/Coding Tips

CSS3만을 이용해 메뉴 만들기

<!DOCTYPE html>

<html>

<head>

    <title>Menu</title>

    <meta charset="UTF-8">

    <meta name="description" content="">

    <meta name="keywords" content="">

<style>

ul.menu{

padding:0px;

margin:0px;

margin:auto;

width:660px;

}

ul.menu li{

list-style: none;

width:100px;

padding:15px;

float:left;

}

ul.menu li:nth-of-type(even){

background-color:yellow;

}

ul.menu li:nth-of-type(odd){

background-color:darkolivegreen;

color:white;

}

ul.menu li>div{

position:relative;

top:0px;

left:0px;

width:0px;

height:0px;

}

ul.menu li>div>div{

position:absolute;

top:15px;

left:-15px;

width:200px;

height:300px;

background-color:darkorange;

clip:rect(0px,0px,0px,0px);

transition:clip 0.3s;

}

ul.menu li:hover>div>div{

clip:rect(0px,200px,300px,0px);

}

</style>

</head>

<body>

<ul class="menu">

<li>One<div><div>Sub-menu</div></div></li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

</ul>

</body>

</html>



참 쉽죠잉?
ul로 항목들을 나열하고 크기를 정한뒤 Float을 사용하면 이렇게 깔끔하게 정렬됩니다.
거기다 even, odd를 나누어서 멋을 좀 부려봤습니다
hover부분이 중요한데요 메뉴항목에 마우스가 올라가면 아래쪽에 주황색 박스를 보이게 하는것을 구현한 부분인데요 clip을 사용해 평소엔 보이지 않게 하다가 hover되면 하위항목인 div를 보이게 합니다.
div를 두개 쓴 것은 레이아웃을 위한 하나의 꼼수라고 할수있어요. 원래 position:relative를 하게되면 원래 있어야 할 자리를 차지하기 떄문에 레이어 2개를 겹쳐서 항목의 위치를 쉽게 조정하면서도 레이아웃을 해치지 않죠.



약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트
약간의텍스트