WordPress: Creating Horizontal Menus：修订间差异

2008年4月11日 (五) 16:48的版本

Horizontal Menus are an excellent way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Many web designers place a horizontal menu under the header, where they draw the eye. 横向菜单是创建一个目录或者网页菜单的一个极好的方式，突出你的站点中一些特别的区域。

Horizontal menus are created with the HTML List feature. Yes, while they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow us to set the list to run on one line instead of a separate line for each list item.

横向菜单由HTML列表功能创建。对，虽然它们是横向的而不是竖向的，就像典型的列表，但它们仍然是一个列表。CSS呈现形式能使你在一行而不是一个分开的行中为每个列表项目设置列表。

Since horizontal menus are simply lists in a horizontal line, let's start the process with a list. 因为横向菜单只列在一个横向的一行，让我们从一个列表开始这个过程。

Creating a Horizontal Menu

创建一个横向菜单

Below is the simple list for our horizontal menu. We recommend you keep your list small as too many will stretch wide across the screen and may cause some layout problems. We've enclosed the list in a division called navmenu. 下面是我们的横向菜单的一个简单的列表。我们建议你将你的列表设定小一点，因为太多，就会长长地伸展在屏面上，可能会导致一些布局的问题。我们将列表放到一个叫做navmenu的层中。

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

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

As you can see, within our list we've included a PHP tag for the "home page" and several categories, as well as a link to WordPress, those helpful folks. The list would look like this, in its simplest form (as styled by the Codex): 就如你看到的，我们在列表中为"主页"和其它的分类，包含了一个PHP标签，以及一个转到WordPress的链接，这些有用的部分，列表在最简单形式下(as styled by the Codex)，看起来像：

HOME
主页
RECIPES
处方
TRAVEL
行进
WORDPRESS

WORDPRESS

You can also use the wp_list_cats() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:

你也可以使用wp_list_cats() 模板标签来列出你的类别。如果你只想列出类别1，2，3，4，5，排斥其它的类别，你的列表可能看起来像：

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php list_cats('FALSE', '',
                '', '', TRUE, FALSE, 
                FALSE, TRUE, TRUE, 
                FALSE, , '', , 
                '', '', '2,6,7,8,9,10,11,12', 
                FALSE); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php list_cats('FALSE', '',
                '', '', TRUE, FALSE, 
                FALSE, TRUE, TRUE, 
                FALSE, , '', , 
                '', '', '2,6,7,8,9,10,11,12', 
                FALSE); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

The place to put your new list might be just under the header. In WordPress v1.5, open the header.php file in the WordPress Theme folder you are using. Paste the code at the bottom of the file after the header DIV and then save the file. 你放置新列表的地方，可能就在标题下面。在WordPress v1.5,在你正使用的WordPress主题文件夹中打开header.php文件。将代码粘贴到文件的底部，在header DIV后，然后保存文件。

In WordPress v1.2, open the index.php file and look for the end of the header section and place your list code there.

在 WordPress v1.2, 打开 index.php文件，l并且找到 header 部分的尾部，将你的列表代码放到那儿。

Applying the CSS

应用 CSS

By default, a list runs vertically, each item on its own line. It also includes an image, known as a bullet, before each line. In your stylesheet, we need to add a reference to the navmenu and the first step is to remove the bullet and set our margins and padding to zero for the whole list. 默认情况下，一个列表是垂直运行的，每个项目都在自己的行上。它也包含有一个图像，叫做一个bullet，在每一行的前面。在你的样式表上，我们需要给navmenu添加一个参考，第一步是要清除bullet,并且为整个列表，将我们的margin和padding设置为零。

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

If you save and upload your stylesheet, then refresh the test page in your web page browser, you would see that your list now has no bullets and no indents, if everything is working right. 如果你保存并且上传了你的样式表，在你的网页浏览器上刷新测试页面，如果一切运行顺利的话，你可以看见你的列表现在既没有bullets也没有缩进。

Now, we need to add the technique that will set this list into a horizontal line. We need to add a style reference to the list item itself.

现在，我们要添加方法，这个方法会将这个列表设置成一个横行。我们需要给列表项目添加一个样式参考。

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

Because these are links, we have to take a moment to clean up the look of the links. There are many things you can do to style this list, but for now, let's add some space to the list of links so they aren't crowded together and remove the default link underline and have the link change colors when the mouse moves over it.

因为这些是链接，我们要花一些时间来整理好这些链接的外观。你可以做许多事来设计这个列表，但是现在，让我们给链接列表添加一些空格，这样它们不会拥挤在一起，然后去除默认链接下划线，而且当鼠标移向链接时，使链接改变颜色。

#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; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

Okay, we can't resist. Let's take this another step further and give our new horizontal menu list some real jazz. See if you can tell what is being done to change the look.

好的，我们不能反抗。让我们进一步地采取另一个措施，给我们新的横向菜单列表一些真正的jazz.看看你是否能说出做了什么来，改变了外观。

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

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

If we did this all correctly, your list should look like this: 如果我们都正确地完成了这些，你的列表看起来像：

HOME
RECIPES
TRAVEL
WORDPRESS

HOME
RECIPES
TRAVEL
WORDPRESS

More Information on Horizontal Menus

关于横向菜单的更多的信息

There are many different ways to style lists. Use your imagination and come up with your own design, alternating colors, or whatever you want. Here are a few resources that will help you get started and learn more about Horizontal and other special effects menus: 设计列表有许多不同的方式。运用你的想象力，拿出你自己的设计，更改颜色，以及任何你想要更改的东西。以下是一些资源，会帮助你开始，并且学习更多的横向和其它特别效果的菜单：

WIKI使用导航

站长百科导航

站长专题