본문 바로가기
Blog Tip/Design

스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기

by 카쿠覺 2013. 3. 4.

 

이번 글을 보시기 전에 이전에 메뉴바와 관련해 올렸던 글들을 미리 읽어보시길 권장합니다. 오늘 다룰 '스킨에서 제공하는 상단 메뉴바에 서브 메뉴 넣기'는 이전에 메뉴바를 다뤘던 모든 글들이 합쳐져 있기 때문입니다. 모두 읽어 보시기에 시간이 부족하시다면 '스킨에서 제공하는 상단 메뉴바 수정하기'라는 포스트는 꼭 읽어주시길 바랍니다. 본 포스트의 내용은 해당 포스트에서 이어지는 내용입니다. 이전에 모두 다룬 내용이기 때문에 자세한 설명은 생략하도록 하겠습니다.

 

CSS를 이용해 블로그 상단 메뉴바 만들기 (1)
CSS를 이용해 블로그 상단 메뉴바 만들기 (2)
스킨에서 제공하는 상단 메뉴바 수정하기
CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1)
CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2)

 

1. 오늘 사용할 예제

 

 

이전에 만들었던 예제를 그대로 사용합니다. 해당 예제를 스킨에 적용하는 방법은 앞서 언급했던 포스트들을 참고해주시길 바랍니다.

 

2. 리스트 작성하기

 

이전에 상단 메뉴바를 편집했던 방식은 티스토리에서 제공하는(화면설정 > 메뉴) 기능을 그대로 살린채 사용하는 방법이였으나, 서브 메뉴를 넣기 위해서는 기존에 제공하는 기능을 사용하지 못하게끔 변경해야 합니다. 때문에 화면설정의 메뉴를 통해 서브메뉴의 수정 역시 불가능합니다. 이를 위해서 먼저 [샵#_blog_menu_#샵] 치환자를 찾아 삭제하여 해당 레이어를 빈칸으로 남겨놓고, 그 레이어 내부에 사용하고자 하는 메뉴의 리스트를 작성합니다. 이번에 사용되는 메뉴의 리스트는 Menu 1 ~ Menu 5에 2번과 3번 메뉴에 서브메뉴 1~3을 넣도록 하겠습니다.

 

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

 

3. 드롭 다운 메뉴 기본 형태 만들기

 

아무런 변화가 없는 상황에 서브 메뉴가 출력되지 않게 하고, 롤오버시에만 출력되게 만들기 위해서 다음의 스타일을 추가합니다.

 

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

 

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


#blogMenu ul ul li {
float:none;
}

 

4. 서브 메뉴 형태 변경하기

 

#blogmenu라고 적용되어 있는 스타일을 모두 삭제한 후 아래의 내용으로 변경합니다.

 

#blogMenu {

 float:right;
margin:0px 5px 2px 5px;
 padding: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 ul {

margin-top:2px;
padding-bottom: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;

}

 

그 후,

 

#blogMenu li,

#counter li,
#tagbox li,
#taglog li {
 display:inline;
}

 

이 부분을

 

#blogMenu li {
float:left;
}

 

#counter li,
#tagbox li,
#taglog li {
 display:inline;
}

 

이렇게 수정합니다.

 

5. 완성된 예제

 

 

 

(http://kakkusourcetest.tistory.com/)

반응형

댓글