HTML 또는 워드프레스용 CSS 드롭다운 메뉴 만들기

출처 <http://wordpressblog.co.kr/wordpress-tutorial/menu/css-dropdown-menu/>

HTML 또는 워드프레스용 CSS 드롭다운 메뉴 만들기

웹 사이트의 규모가 커지게 되면, 하부 페이지로 가는 링크들이 많아지게 되고 메뉴들도 많아지게 됩니다. 그럴 경우 한정된 공간에 메뉴를 효욜적으로 배치하기 위해 평소에는 하위 메뉴가 감춰져 있다가 마우스를 해당 메뉴로 가져갔을 때 서브 메뉴들이 펼쳐지는 방식을 사용할 수 있습니다. 이런 방법을 드롭다운(Dropdown) 메뉴라고 합니다.

CSS 드롭다운 메뉴 만들기

CSS 드롭다운 메뉴는 Jquery에 비해 메뉴가 로딩되는 시간이 짧고, 브라우저에서 자바스크립트 기능을 꺼버려도 사용이 가능하다는 장점이 있지만, 하위 메뉴가 열리고 닫히는 시간이 조금 빠르기 때문에, 펼쳐진 하위메뉴로 마우스를 갖다대기도 전에 하위메뉴가 다시 닫혀버리는 경우가 종종 발생하는 단점이 있습니다.

하지만, Jqeury를 사용하면 메뉴가 닫히고 열리는 타이밍이 조절가능하며, 다양한 효과도 낼 수 있고 적용하기도 쉽기 때문에, 대부분의 드롭다운 메뉴는 자바스크립트를 이용한 Jquery를 사용합니다. 그렇다고 CSS를 대충 작성하면 브라우저의 자바스크립트 기능을 꺼버릴 경우 메뉴가 제대로 작동하지 않게 되므로 Jquery를 사용하더라도 기본적으로 CSS로 드롭다운이 되게 해 놓는 것이 좋습니다.

CSS Drop Down Menu의 종류

Jquery Dropdown 메뉴는 많았는데, CSS로 된 메뉴는 별로 없었습니다.

• Free CSS Drop-Down Menu Framework : 다단계 드롭다운 메뉴, IE6 브라우저를 제외한 대부분의 브라우저와 호환, IE6에서는 Jquery 사용
• CSS3 Dropdown Menu : CSS3를 사용한 멀티 드랍다운 메뉴, IE6을 제외한 대부분의 브라우저와 호환, IE6은 Jquery를 사용( 데모 )
• A cross-browser drop-down cascading validating menu : IE6을 포함한 대부분의 브라우저와 호환, 개인 웹사이트에 사용시에는 CSS 파일에 원작자의 웹 주소 표기해야 함, 상업용일 경우 원작자의 허락을 받아야 함.
• CSS Express Drop-Down Menus : 1 단계 드롭다운 메뉴( 데모 ), IE6을 포함한 대부분의 브라우저와 호환

HTML 마크업

대부분의 CSS 드롭다운 메뉴는 아래와 같은 마크업을 요구합니다. 워드프레스도 아래와 같은 마크업으로 메뉴를 출력합니다. 예외적으로 다른 마크업을 쓰는 방법도 있는데 그럴 경우 HTML 사이트에는 적용가능하지만 워드프레스는 마크업이 자동적으로 출력이 되기 때문에 사용이 힘듭니다.

<ul>
	<li><a href="./">Home</a></li>
	<li><a href="./">About Us</a>
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
		</ul>
	</li>
	<li><a href="./">Contact Us</a></li>
</ul>

위와 같이, 각각의 아이템(Home, Ahout Us, Contact Us)들은 각각 li 태그로 둘러싸야 되고, 각각의 아이템들을 ul 태그로 둘러싸서 하나의 메뉴 셋을 만들어야 합니다. 하위 메뉴 세트(History, Our Vision)도 ul 태그와, li로 만들면 되는데, 주의 할 것은 하위메뉴의 ul 태그가 상위 메뉴 아이템(About Us)의 li 태그 안에 위치해야 합니다.

즉, 아래와 같은 방식으로 메뉴를 구성하면 안됩니다.

	<li><a href="./">About Us</a></li>    <!-- </li> 태그 안쪽에 하위메뉴가 와야 됨 -->
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
		</ul>
	<li><a href="./">Contact Us</a></li>
</ul>

CSS 드롭다운 메뉴 적용하기

CSS 초보 분들을 위해서 위의 방법들 중에서 Free CSS Drop-Down Menu Framework 방법을 적용해서 메뉴를 만드는 과정을 알아보겠습니다.

HTML 마크업 확인

CSS가 레이아웃 깨짐없이 제대로 적용되기 위해서는 메뉴의 HTML 구조가 해당 방법과 일치해야 합니다. CSS Drop-Down Menu Framework는 HTML 구조에 대한 설명이 없기 때문에, 직접 HTML 문서를 에디터로 열어서 확인을 해 봐야 합니다.

우선, CSS Drop-Down Menu Framework 페이지 하단에 있는 다운로드 버튼을 클릭해서 해당 메뉴 파일들을 받아야 합니다. 다운로드 받은 압축파일을 풀어보면 free-css-drop-down-menu_v1.1.1 폴더안에 여러개의 데모 메뉴 문서들( advanced.html, adobe.com.html, flickr.com.horizontal.html, …)이 있습니다. 각각 클릭해보고 자신의 테마에 적용할 메뉴 문서파일을 결정합니다.

여기선, 아래와 같이 보이는 simple.horizontal.html 메뉴를 적용해 보겠습니다.

위의 메뉴의 HTML 구조를 알기 위해서 해당 메뉴 문서의 빈 곳에 마우스 오른쪽 버튼을 클릭한 후에 ‘소스보기’ 메뉴를 클릭합니다. (또는 해당 파일을 에디터로 직접 열어도 됩니다.) 그러면 아래와 같은 부분을 찾아볼 수 있습니다.

<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="./">Home</a></li>
	<li class="dir">About Us

	<!--    생  략   -->

	</li>
</ul>

<!-- / END -->

위 태그들을 보면, 앞에서 말한 하위메뉴 ul 태그들이 상위메뉴 아이템 li 태그 안에 위치해 있어서 HTML 사이트는 물론, 워드프레스에도 적용할 수 있다는 것을 알 수 있습니다.

워드프레스에 CSS 적용하기

simple.horizontal.html 메뉴의 마크업을 워드프레스에서 사용가능하다는 것을 확인했기 때문에, simple.horizontal.html 메뉴의 CSS를 워드프레스에 적용시킬 수가 있습니다. simple.horizontal.html 문서의 head 부분을 보면 아래와 같은 곳이 있습니다.

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

위에서 보면 html 문서를 dropdown.css 파일과 default.css 파일로 스타일링 하고 있다는 것을 알 수 있습니다.(그 위에 있는 helper.css 파일은 메뉴와는 직접적인 상관이 없습니다.) 또한 브라우저의 버전이 IE7 미만(Less Than)이면 jquery.js 와 jquery.dropdown.js 자바스크립트를 실행하는 것도 알 수 있습니다.

위의 코드를 모두 워드프레스 테마의 header.php 파일의 head 부분의 적당한 곳에 붙여넣기 하면 해당 CSS와 자바스크립트를 워드프레스에서 사용가능하게 됩니다. 그런데 참조하는 내부 파일들이 많으면 사이트의 로딩속도에 안좋은 영향을 주므로 위의 두개의 CSS 파일은, 안의 내용을 복사해서 사용중인 테마의 style.css에 붙여 넣어 주고. jquery 파일들만 아래의 보기와 같이 header.php 파일의 head 부분의 적당한 곳(예: <?php wp_head(); ?> 바로 밑에 줄)에 복사해 주면 됩니다.

<?php wp_head(); ?>
<!--[if lt IE 7]>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.dropdown.js"></script>
<![endif]-->

위에서 주의할 점이 파일의 경로입니다. CSS 파일들은 style.css에 붙여넣기 했으므로 올릴 필요가 없고, Jquery 파일들은 계정으로 올려야 하는데, 만약에 해당 테마의 루트디렉토리( 예: wp-content/themes/yourtheme/ ) 밑에 있는 js/jquery/ 디렉토리에 올렸다면 경로는 아래와 같이 됩니다.

http://yoursite.com/wp-content/themes/yourtheme/js/jquery/jquery.js

위와 같은 경로를 테마의 루트 디렉토리를 출력하는 <?php bloginfo('template_directory'); ?> 템플릿 태그를 사용하면 아래와 같이 됩니다.

<?php bloginfo('template_directory'); ?>/js/jquery/jquery.js

그리고, default.css에 보면 li 엘리먼트에 필요한 이미지 파일들이 아래와 같이 background 이미지로 적용이 되어 있는데, style.css 파일이 있는 테마의 루트 디렉토리 밑에 있는 images 라는 하위 폴더에서 이미지를 참조하고 있습니다. 따라서 다운 받은 파일에 있는 nav-arrow-down.png, nav-arrow-right.png, nav-arrow-top.png, nav-arrow-left.png 파일들을, 테마의 루트 디렉토리 밑의 images라는 폴더로 업로드해 줘야 합니다. ( 참고 : 웹 문서의 경로)

background-image: url(images/nav-arrow-down.png);

id와 class name 일치시키기

테마의 style.css로 복사한 default.css와 dropdown.css의 내용이 실제 테마의 메뉴에 적용이 되게 하려면 복사한 CSS에서 사용된 id와 class가 워드프레스 HTML 태그에도 적용이 되어야 합니다.

‘Appearance>Editor’ 페이지에서 header.php 파일을 선택해서 <?php wp_nav_menu() ?> 부분을 찾습니다. 보통 아래와 비슷한 코드를 하고 있습니다. ( 구 버전의 테마일 경우 wp_list_pages 함수를 사용하고 있을 수도 있습니다. 그럴 경우에는 3.0 메뉴로 수정해줘야 합니다.)

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

1. 만약 기존의 메뉴 레이아웃을 사용하지 않고, simple.horizontal.html의 레이아웃을 그대로 사용하고 싶다면 아래와 같이, 원래 있는 wp_nav_menu를 주석처리한 후에 그 밑에 default.css와 dropdown.css에서 사용된 id와 class name을 적용해서 메뉴를 출력하면 됩니다. 메뉴가 의도한 대로 출력이 되면, 주석처리한 기존의 메뉴는 삭제하면 됩니다.

<!-- <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> -->
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'dropdown dropdown-horizontal' ) ); ?>

위에서처럼 기존의 theme_location 파라미터는 그대로 써줘야 하고, ul tag의 id 를 출력하는 menu_id 파라미터에는 아래와 같이 nav를 사용하고,

'menu_id' => 'nav'

ul tag의 class를 출력하는 menu_class 파라미터에는 아래와 같이 dropdwon 과 dropdown-horizontal 메뉴를 사용하면 됩니다. 각각의 파라미터들은 쉼표로 구분하면 됩니다. 먄약 레이아웃이 깨진다면 기존의 css가 새로 만든 메뉴의 css에 영향을 주는 부분을 찾아서 수정해 줘야 합니다.

'menu_class' => 'dropdown dropdown-horizontal'

2. 만약 기존 메뉴의 레이아웃과 색상을 그대로 유지하면서 드롭다운 메뉴를 만들고 싶다면 되도록 기존의 id와 class를 유지해야 합니다. 만약 기존의 메뉴가 앞에서 예를 든 것과 같다면, 아래와 같이 ul 태그를 둘러싸고 있는 div 태그도 남겨줘야 합니다.

<!-- <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> -->
<?php wp_nav_menu( array(  'container_class' => 'menu-header', 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'dropdown dropdown-horizontal' ) ); ?>

만약 기존의 레이아웃이 아래와 같이 이미 ul 태그에 id와 class가 적용되고 있고 nav라는 id도 사용되고 있다면 고려해야 할 사항이 많아집니다.

<?php wp_nav_menu( array( 'container_class' => 'nav', 'theme_location' => 'primary', 'menu_id' => 'menu', 'menu_class' => 'menu' ) ); ?>

id 는 하나의 웹페이지내에서 한번만 사용을 하는 것이 좋습니다. 그런데 이미 'container_class' => 'nav'에서 ul 엘리먼트를 둘러싸고 있는 div 엘리먼트에 nav 아이디가 사용이 되었기 때문에 ul 엘리먼트에 nav 아이디를 사용하기 위해, div 엘리먼트의 아이디를 nav_wrap 과 같은 다른 이름으로 바꿔 주고 style.css에서 #nav 로 되어 있는 곳을 #nav_wrap으로 다 치환해 줘야 합니다. 치환해준 후에 실제 웹페이지 상에서 메뉴의 레이아웃이 깨지지 않고 원래대로 나온다면 제대로 바꿨다고 보면 됩니다.

div 엘리먼트의 id가 nav_wrap이므로 ul 태그의 아이디를 nav로 사용할 수 있습니다. 그런데, ul 엘리먼트에 menu라는 아이디가 사용이 되고 있기 때문에, menu를 nav로 바꾸어 줍니다. 그리고 style.css에서 #menu 라고 되어있는 부분을 #nav로 치환해줘서 기존의 레이아웃이 유지되도록 해야 합니다. 다 치환해준 후에 메뉴의 레이아웃이 이상이 없는지 실제 웹페이지상에서 확인을 해야 합니다.

그리고 ul 태그의 class name도 적용시켜야 하는데 id 와는 달리 웹페이지내에서 중복사용이 가능하므로 아래와 같이, 기존의 클래스명에 추가시켜 주면 됩니다.

'menu_class' => 'menu dropdown dropdown-horizontal'

그러면 기존의 wp_nav_menu 코드는 아래와 같이 됩니다.

<?php wp_nav_menu( array( 'container_class' => 'nav_wrap', 'theme_location' => 'primary', 'menu_id' => 'nav', 'menu_class' => 'menu dropdown dropdown-horizontal' ) ); ?>

위와 같이 하게 되면, 기존의 menu 클래스와 dropdown, dropdown-horizontal 클래스가 서로 충돌이 있어서 약간 레이아웃이 깨져 보이는데, 이건 붙여넣기한 CSS를 기존의 메뉴와 맞게 조금 수정해 줘야 합니다.

3. 마지막으로, 서브메뉴가 있는 li 태그에 사용되고 있는 dir class를 출력시켜야 합니다. 그런데, wp_nav_menu 파라미터 수정으로는 li 태그에 클래스명을 출력 할 수 없습니다. li 태그에 원하는 클래스명을 출력하기 위해서는 ‘Appearance>Menus’ 페이지의 오른쪽에서 해당 li 항목을 찾아 ‘CSS Classes’ 항목에 dir을 직접 입력해 줘야 합니다. 만약 해당 입력항목을 찾을 수 없다면, 상단에 있는 ‘Screen Options’ 버튼을 클릭한 후에, ‘Show Advanced Menu Properties ‘ 항목 밑에 있는 ‘CSS Classes’ 체크박스를 클릭해 주면 됩니다. ( 참고 : 메뉴의 li 태그의 class name 종류 )

붙여넣기한 CSS 수정하기

앞에서와 같이 id와 css를 똑같이 일치해줘도, 레이아웃이 약간 안 맞을 수 있습니다. 그건 각자 테마의 상황에 맞게 style.css로 붙여넣기한 css를 수정해야 합니다.

dropdown.css에서 복사한 부분은 드롭다운 메뉴를 만들기 위해 작성한 것으로 레이아웃이 안 맞는다고 해서 수정할 필요는 없습니다. 다만 메뉴바의 세로 높이를 조정할 필요가 있을 때 아래와 같은 부분을 찾아서 1.3을 다른 수치로 변경해 주면 됩니다.

line-height: 1.3em;

그 외에는 default.css에서 복사한 부분을 적당히 수정해 주면 됩니다.

펼쳐진 하위 메뉴의 가로 폭을 수정하기 위해서는 아래와 같은 부분을 찾아서 적당히 고쳐주면 됩니다.

width: 150px;

각각의 메뉴 링크에 있는 테두리를 수정하려면 아래와 같은 부분을 적당히 고쳐주면 되고 테두리를 완전히 없애고 싶으면 아래의 세줄을 지우면 됩니다.

	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;

그 외의 메뉴 색상들은 color 또는 background-color 라고 된 부분을 수정해 주면 됩니다.

하위메뉴가 다른 요소 밑에 감춰질 경우

간혹 펼쳐지는 하위 메뉴가 밑에 있는 다른 레아이웃 밑으로 들어가서 제대로 보이지 않는 경우가 발생할 수도 있습니다. 예를 들면 아래와 같은 HTML 구조로 테마가 구성되어 있을 때,

<div id="header">
	<?php wp_nav_menu(............) ?>
</div>

<div id="content">
	<!--    생략     -->
</div>

펼쳐진 서브 메뉴가 content 엘리먼트 밑으로 들어가 버려서 제대로 보이지 않을 수가 있습니다. 그럴 때는, 아래와 같이 style.css에서 content 엘리먼트보다, wp_nav_menu가 있는 header 엘리먼트의 z-index 값을 높게 해 줘야 합니다.

#header {z-index: 100;}
#content {z-index: 10;}

카테고리의 다른 글 목록

• 워드프레스 3.0 정식버전 살펴보기 - 메뉴,헤더,백그라운드 이미지
• 구 버전의 워드프레스 테마의 메뉴를 3.0 버전으로 수정하기
• 워드프레스 메뉴의 수정에 유용한 li 태그의 class name 종류
• 드롭다운메뉴 만들기 - Jquery를 이용해서 워드프레스에 적용하기