WordPress.org

Ready to get started?Download WordPress

Codex

ko:Creating Horizontal Menus

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

수평 메뉴는 카테고리 또는 페이지 메뉴를 만드는 훌륭한 방법이다. 웹사이트 내에서 관심 있는 특정 영역을 강조한다. 많은 웹 디자이너는, 시선을 끄는, 헤더 아래에 수평 메뉴를 배치한다.

수평 메뉴는 HTML List 기능을 사용하여 만든다. 그렇다, 일반적인 목록처럼, 수직이 아닌 수평이지만, 이것은 목록이다. CSS 표시(presentation) 스타일로 각 목록 항목을 별도의 줄로 배치하는 대신, 한 줄로 배치할 수 있다.

수평 메뉴는 단순히 수평 라인에 있는 목록이기 때문에, 목록을 가지로 이 과정을 시작한다.

Contents

수평 메뉴 생성

아래는 수평 메뉴의 간단한 목록이다. 목록은 작게 만드는 것이 좋다. 화면을 가로질러 너무 넓게 배치되면, 레이아웃에 문제가 발생할 수 있기 때문이다. navmenu라는 division으로 목록을 감싼다.

<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/recipes/">RECIPES</a></li>
	<li><a href="wordpress/travel/">TRAVEL</a></li>
	<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

보는 바와 같이, 목록에 "홈페이지(HOME)"와 여러 개의 카테고리 및 워드프레스 페이지 링크 PHP 태그가 포함되어 있다. 목록은 다음과 같이 가장 간단한 형태(코덱스로 스타일링한 것처럼)로 보일 것이다:

  • HOME
  • RECIPES
  • TRAVEL
  • WORDPRESS

카테고리 목록을 만들기 위해 wp_list_categories() 템플릿 태그를 사용할 수도 있다. 나머지는 제외하고, 카테고리 1, 3, 4, 5 목록을 만든다면, 목록은 다음과 같을 것이다:

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php wp_list_categories('orderby=name&include=1,3,4,5'); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

새 목록은 헤더 바로 아래에 배치될 수 있다. 워드프레스 버전 1.5에서, 사용 중인 워드프레스 테마 폴더에 있는 header.php 파일을 연다. header DIV 다음의 파일 맨 아래에 이 코드를 붙여 넣고, 이 파일을 저장한다.

워드프레스 버전 1.2에서, index.php 파일을 열고, header 섹션의 마지막을 찾아, 거기에 목록 코드를 배치한다.

CSS 적용

기본으로, 목록은 수직으로 배치된다. 각 항목은 별도의 줄에 배치된다. 각 줄 앞에 글머리 기호라는 이미지를 포함할 수도 있다. 스타일시트에서, navmenu에 대한 참조를 추가하고 우선 글머리 기호를 제거하고, 전체 목록의 마진과 패딩을 0으롯 설정한다.

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }

스타일시트를 저장하고 업로드하면, 웹페이지 브라우저는 테스트 페이지를 새로 고친다. 제대로 작동한다면, 목록은 글머리 기호가 없어지고, 들여 쓰기도 없게 된다.

이제, 이 목록을 수평으로 설정하는 기술을 추가해야 한다. 목록 항목 자체를 스타일링하기 위한 참조를 추가해야 한다.

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

이것은 링크이기 때문에, 이 목록 링크의 모양을 잠시 정리해야 한다. 이 목록을 스타일링하기 위해 할 수 있는 일이 많다. 그러나 지금은, 복잡하게 보이지 않게 하기 위해, 링크 목록에 공란을 좀 추가하고, 기본 링크 밑줄을 지운다. 그리고 링크에 마우스 올려 놓으면 색상이 변경되게 한다.

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

여기서, 더 나아가 보자, 수평 메뉴 목록을 더 매력적으로 만들어보자. 모양을 변경하기 위해 추가된 내용을 살펴보자.

#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

모든 것을 제대로 하였다면, 목록은 다음과 같이 보일 것이다:

  • HOME
  • RECIPES
  • TRAVEL
  • WORDPRESS

CSS 제외 시

CSS가 꺼져 있으면, 브라우저에서 위 코드는 작동하지 앟을 것이다: <li> 목록은 수평이 아닌 수직으로 배치될 것이다.

그러므로, 이런 브라우저에 적용하려면, 다음 예제를 사용할 수 있다,

<p>Archives:<?php wp_get_archives('format=custom&show_post_count=1&type=yearly&after=;'); ?>
Categories:<?php echo str_replace('<br />',';', wp_list_categories('style=&show_count=1&echo=0'));?></p>

수평 메뉴에 대한 추가 정보

목록을 스타일링하는 방법은 다양하다. 상상력을 사용하여, 자신의 디자인을 만든다. 색상 또는 원하는 무었이든지 변경한다. 다음은 수평 및 기타 특수 효과 메뉴에 대해 도움이 되는 자료이다: