Languages: English • 한국어 • (Add your language)
수평 메뉴는 카테고리 또는 페이지 메뉴를 만드는 훌륭한 방법이다. 웹사이트 내에서 관심 있는 특정 영역을 강조한다. 많은 웹 디자이너는, 시선을 끄는, 헤더 아래에 수평 메뉴를 배치한다.
수평 메뉴는 HTML List 기능을 사용하여 만든다. 그렇다, 일반적인 목록처럼, 수직이 아닌 수평이지만, 이것은 목록이다. CSS 표시(presentation) 스타일로 각 목록 항목을 별도의 줄로 배치하는 대신, 한 줄로 배치할 수 있다.
수평 메뉴는 단순히 수평 라인에 있는 목록이기 때문에, 목록을 가지로 이 과정을 시작한다.
아래는 수평 메뉴의 간단한 목록이다. 목록은 작게 만드는 것이 좋다. 화면을 가로질러 너무 넓게 배치되면, 레이아웃에 문제가 발생할 수 있기 때문이다. 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 태그가 포함되어 있다. 목록은 다음과 같이 가장 간단한 형태(코덱스로 스타일링한 것처럼)로 보일 것이다:
카테고리 목록을 만들기 위해 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 섹션의 마지막을 찾아, 거기에 목록 코드를 배치한다.
기본으로, 목록은 수직으로 배치된다. 각 항목은 별도의 줄에 배치된다. 각 줄 앞에 글머리 기호라는 이미지를 포함할 수도 있다. 스타일시트에서, 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; }
모든 것을 제대로 하였다면, 목록은 다음과 같이 보일 것이다:
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>
목록을 스타일링하는 방법은 다양하다. 상상력을 사용하여, 자신의 디자인을 만든다. 색상 또는 원하는 무었이든지 변경한다. 다음은 수평 및 기타 특수 효과 메뉴에 대해 도움이 되는 자료이다: