WordPress:Creating Horizontal Menus
横向菜单是创建一个目录或者网页菜单的一个极好的方式，突出你的站点中一些特别的区域。 横向菜单由HTML列表功能创建。对，虽然它们是横向的而不是竖向的，就像典型的列表，但它们仍然是一个列表。CSS呈现形式能使你在一行而不是一个分开的行中为每个列表项目设置列表。 因为横向菜单只列在一个横向的一行，让我们从一个列表开始这个过程。
创建一个横向菜单[ ]
下面是我们的横向菜单的一个简单的列表。我们建议你将你的列表设定小一点，因为太多，就会长长地伸展在屏面上，可能会导致一些布局的问题。我们将列表放到一个叫做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>
就如你看到的，我们在列表中为"主页"和其它的分类，包含了一个PHP标签，以及一个转到WordPress的链接，这些有用的部分，列表在最简单形式下(as styled by the Codex)，看起来像：
- 主页
- 处方
- 行进
- WORDPRESS
你也可以使用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>
你放置新列表的地方，可能就在标题下面。在WordPress v1.5,在你正使用的WordPress主题文件夹中打开header.php文件。将代码粘贴到文件的底部，在header DIV后，然后保存文件。 在 WordPress v1.2, 打开 index.php文件，l并且找到 header 部分的尾部，将你的列表代码放到那儿。
应用 CSS[ ]
默认情况下，一个列表是垂直运行的，每个项目都在自己的行上。它也包含有一个图像，叫做一个bullet，在每一行的前面。在你的样式表上，我们需要给navmenu添加一个参考，第一步是要清除bullet,并且为整个列表，将我们的margin和padding设置为零。
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
如果你保存并且上传了你的样式表，在你的网页浏览器上刷新测试页面，如果一切运行顺利的话，你可以看见你的列表现在既没有bullets也没有缩进。
现在，我们要添加方法，这个方法会将这个列表设置成一个横行。我们需要给列表项目添加一个样式参考。
#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; }
好的，我们不能反抗。让我们进一步地采取另一个措施，给我们新的横向菜单列表一些真正的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; }
如果我们都正确地完成了这些，你的列表看起来像：
- HOME
- RECIPES
- TRAVEL
- WORDPRESS
关于横向菜单的更多的信息[ ]
设计列表有许多不同的方式。运用你的想象力，拿出你自己的设计，更改颜色，以及任何你想要更改的东西。以下是一些资源，会帮助你开始，并且学习更多的横向和其它特别效果的菜单：