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

몇몇 블로그를 살펴보면 상단 메뉴바에 마우스를 올릴경우 하위 메뉴가 나오는 것을 확인할 수 있습니다. 이러한 형식을 '드롭다운(Drop Down)' 메뉴라고 이야기합니다. 이번 글에서는 이전에 만들어놓은 상단 메뉴바(관련글)에 서브 메뉴를 추가하는 방법에 대해서 살펴보도록 하겠습니다.

오늘 사용할 스타일 시트 예제

<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;
}

</style>

</SPAN>

1. 메뉴 리스트 작성하기

먼저 사용하고 싶은 메뉴 리스트를 작성합니다. 상위 메뉴의 리스트가 작성된 후에는, 서브 메뉴를 만들고 싶은 상위 메뉴의 <li>내부에 <ul>태그를 이용하여 다시 리스트를 작성합니다. 이번 글에서는 기본 상위 메뉴로 Menu1 ~ Menu5를, 그리고 Menu2와 3의 하위에 Sub Menu 1, 2, 3을 각각 추가하는 경우의 예를 들어보겠습니다.

<li><a href="#">Menu 2</a>

</li>

<li><a href="#">Menu 3</a>

</li>

2. 만들어 놓은 서브메뉴 숨기기

리스트를 모두 만드셨다면, 서브 메뉴 역시도 함께 출력되고 있음을 확인할 수 있습니다. 현재 만들고자 하는 부분은 '마우스 롤오버'시에만 출력되게 하는 것이기 때문에, 기본적인 상황에서는 노출되지 않도록 설정해야 합니다. 이를 위해서 다음의 스타일을 새로이 추가합니다. 이 스타일은, blogMenu라는 이름을 갖는 레이어 내부에 위치하는 ul태그 안에 위치하는 ul의 경우에는 나타내지 않겠다는 설정입니다.

#blogMenu ul ul {

display:none;

}

3. 롤오버시에 출력되게 만들기

이제 숨겨놓은 서브 메뉴가 롤오버시에 출력되게 설정해야 합니다. 마우스가 롤오버 됬다는 것은, 이전에 하이퍼링크 속성(관련글)을 다뤘을 때 언급했듯이 hover속성과 관련이 있습니다. 이를 위해서 다음의 스타일을 추가해주시면 됩니다. 이 스타일은, blogMenu라는 이름을 갖는 레이어 내부에 위치하는 ul태그 내부의 li태그에 마우스를 롤오버시, 그 내부에 있는 ul을 나타내겠다는 설정입니다.

#blogMenu ul li:hover ul {
display: block;
}

4. 롤오버되는 서브 메뉴 위치 조정하기

레이어 내부에 서브 메뉴가 나타나는것이 아니라 외부에 새로운 형태로 나타나게 하기 위하여 기존에 만들어져 있던 #blogMenu ul ul 스타일에 position:absolute;라는 스타일을 추가합니다. 배경의 경우에는 확인차 편의상 넣은것으로, 넣어주셔도 되고 넣지 않으셔도 됩니다.

#blogMenu ul ul {
display:none;
position:absolute;

background-color:#5c5c5c;

}

5. 하위 메뉴를 리스트 형식으로 변경하기

하위 메뉴를 리스트 형식으로 나타내게 하기 위해서 float값을 none으로 설정합니다. 현재 리스트가 한줄로 나타나고 있는 것은 blogMenu ul li에서 float:left로 줘서이기 때문에 이 부분을 적용하지 않게 설정함으로써 한줄 형태가 아니라 리스트 형태로 서브메뉴를 출력할 수 있습니다.

#nav_menu ul ul li {

float:none;

}

이 스타일을 추가해주시면 하위 메뉴가 리스트 형식으로 정렬됩니다.

완성된 예제

<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;
	background-color:#5c5c5c;
}

#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>
</SPAN>

다음번 글에서는 만들어진 하위메뉴를 보다 보기 좋게 변경하는 법에 대해서 알아보겠습니다.

저작자표시 비영리 변경금지

'Blog Tip > Design' 카테고리의 다른 글

스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 (7)	2013.03.04
CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2) (26)	2013.03.01
스킨에서 제공하는 상단 메뉴바 수정하기 (5)	2013.02.26
CSS를 이용해 블로그 상단 메뉴바 만들기(2) (7)	2013.02.22
CSS를 이용해 블로그 상단 메뉴바 만들기(1) (12)	2013.02.21