CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2)

 

이전에 만들어 놓은 예제(드롭다운 첫번째 글)를 계속 이용하겠습니다. 이번 포스트에서 다룰 내용은 이미 만들어져 있는 서브메뉴의 형태를 보다 보기좋게 수정하는 방법에 관한 글입니다. 여기서 주로 다루게 되는 내용은 기존에 다룬바 있는 내용(배경과 테두리, 그림자로 레이어 꾸미기)이므로, 이전 글을 보신다면 더 큰 도움이 되지 않을까 생각합니다.

 

사용할 예제

 

<style> /* 블로그메뉴 */ div, ul, li { margin:0; padding:0; } #blogMenu { float:right; margin:0px 5px 3px 5px; padding:0 0 3px 0; box-shadow: 0px 0px 15px rgba(0,0,0,.3); -moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -o-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color:#5c5c5c; } #blogMenu ul li { float:left; list-style-type:none; } #blogMenu a { height:16px; color:#f1f1f1; font-family:arial; font-size:12px; padding:0 10px 0 10px; text-decoration:none; } #blogMenu a:hover { color:#D4F4FA; border-bottom:3px solid #FAED7D; } #blogMenu ul ul { display:none; position:absolute; } #blogMenu ul li:hover ul { display: block; } #blogMenu ul ul li { float:none; } </style> <div id="blogMenu"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </div>

 

1. 서브메뉴에도 그림자 적용하기

 

blogMenu 스타일에 적용되어 있는 부분을 그대로 복사하여 이용하셔도 상관은 없으나 같은 스타일을 여러번 입력하지 않고 다른 방법을 이용할 수 있습니다. 이를 위해서는 레이어(#blogMenu)에 적용되어 있는 배경과 관련한 스타일만 따로 빼서 또 다른 스타일을 만들어주시면됩니다. 기존에

 

#blogMenu{

 float:right;
margin:0px 5px 3px 5px;
 padding:0 0 3px 0;
box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-o-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color:#5c5c5c;
}

 

라고 되어 있는 부분을

 

#blogMenu {

 float:right;
margin:0px 5px 3px 5px;
 padding:0 0 3px 0;

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

 

#blogMenu, ul ul {
box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-o-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
background-color:#5c5c5c;
}

 

로 수정해주시면 배경과 관련한 스타일만 따로 빼낼 수 있습니다.

 

 

2. 서브메뉴에 모깎기 적용하기

 

이 역시도 기존에 #blogMenu 스타일에 적용되어 있는 모깎기 부분을 그대로 사용해도 상관은 없습니다만, 서브메뉴의 경우에는 좌측하단과 우측하단에만 모깎기를 적용하는 편이 훨씬 낫기 때문에 따로 만드시는 편이 더 좋습니다. 이를 위해서는 미리 만들어져 있는 #blogMenu ul ul부분을 아래와 같이 변경해주시면 됩니다. (보다 자세한 부분은 이전에 다뤘던 배경과 테두리, 그림자로 레이어 꾸미기를 참고하시면 됩니다.)

 

#blogMenu ul ul {

 display:none;
 position:absolute;
 -moz-border-radius-bottom-left: 3px;
  -khtml-border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
 -moz-border-radius-bottom-right: 3px;
  -khtml-border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

 

 

3. 서브메뉴 위치 조정하기

 

자세히 살펴보시면 서브메뉴의 일부가 상위메뉴에 걸쳐져 있음을 확인할 수 있습니다. 걸쳐저 있는 부분을 아래로 약간 내리기 위해서는 #blogMenu ul ul 스타일에 margin-top값을 주시면 됩니다. 예제의 경우에는 상단과의 margin값을 3px만큼 줬습니다.

 

#blogMenu ul ul {

 display:none;
 position:absolute;

margin-top:3px;
 -moz-border-radius-bottom-left: 3px;
  -khtml-border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
 -moz-border-radius-bottom-right: 3px;
  -khtml-border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

 

 

4. 최종 완성된 예제

 

<style> /* 블로그메뉴 */ div, ul, li { margin:0; padding:0; } #blogMenu { float:right; margin:0px 5px 3px 5px; padding:0 0 3px 0; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #blogMenu, ul ul { box-shadow: 0px 0px 15px rgba(0,0,0,.3); -moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -o-box-shadow: 0px 0px 15px rgba(0,0,0,.3); background-color:#5c5c5c; } #blogMenu ul li { float:left; list-style-type:none; } #blogMenu a { height:16px; color:#f1f1f1; font-family:arial; font-size:12px; padding:0 10px 0 10px; text-decoration:none; } #blogMenu a:hover { color:#D4F4FA; border-bottom:3px solid #FAED7D; } #blogMenu ul ul { margin-top:3px; display:none; position:absolute; -moz-border-radius-bottom-left: 3px; -khtml-border-bottom-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-bottom-right: 3px; -khtml-border-bottom-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; } #blogMenu ul li:hover ul { display: block; } #blogMenu ul ul li { float:none; } </style> <div id="blogMenu"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </div>

 

드랍다운 메뉴 만들기 요점정리

 

1. 상위 메뉴와 서브 메뉴 리스트를 작성합니다.

2. 하위 메뉴에는 display:none 스타일을 이용, 나타나지 않게 설정합니다.

3. 롤오버시 나타나게 하기 위해서 li:hover 속성에 display:block 스타일을 이용합니다.