编辑“WordPress:Creating Horizontal Menus”

横向菜单是创建一个目录或者网页菜单的一个极好的方式，突出你的站点中一些特别的区域。
横向菜单由HTML列表功能创建。对，虽然它们是横向的而不是竖向的，就像典型的列表，但它们仍然是一个列表。CSS呈现形式能使你在一行而不是一个分开的行中为每个列表项目设置列表。
因为横向菜单只列在一个横向的一行，让我们从一个列表开始这个过程。
==创建一个横向菜单==
下面是我们的横向菜单的一个简单的列表。我们建议你将你的列表设定小一点，因为太多，就会长长地伸展在屏面上，可能会导致一些布局的问题。我们将列表放到一个叫做<tt>navmenu</tt>的层中。
<pre>
<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></pre>

就如你看到的，我们在列表中为"主页"和其它的分类，包含了一个PHP标签，以及一个转到WordPress的链接，这些有用的部分，列表在最简单形式下(<i>as styled by the Codex</i>)，看起来像：
* 主页
* 处方
* 行进
* WORDPRESS

你也可以使用[[WordPress:Template_Tags/list_cats|<tt>wp_list_cats()</tt> 模板标签]]来列出你的类别。如果你只想列出类别1，2，3，4，5，排斥其它的类别，你的列表可能看起来像：
 <pre>
<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>
</pre>

你放置新列表的地方，可能就在<tt>标题</tt>下面。在WordPress v1.5,在你正使用的[[WordPress:Using Themes|WordPress主题]]文件夹中打开<tt>header.php</tt>文件。将代码粘贴到文件的底部，在<tt>header</tt> DIV后，然后保存文件。
在 WordPress v1.2, 打开 <tt>index.php</tt>文件，l并且找到 <tt>header</tt> 部分的尾部，将你的列表代码放到那儿。
===应用 CSS===
默认情况下，一个列表是垂直运行的，每个项目都在自己的行上。它也包含有一个图像，叫做一个bullet，在每一行的前面。在你的样式表上，我们需要给<tt>navmenu</tt>添加一个参考，第一步是要清除bullet,并且为整个列表，将我们的margin和padding设置为零。

<pre>#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }</pre>
如果你保存并且上传了你的样式表，在你的网页浏览器上刷新测试页面，如果一切运行顺利的话，你可以看见你的列表现在既没有bullets也没有缩进。

现在，我们要添加方法，这个方法会将这个列表设置成一个横行。我们需要给列表项目添加一个样式参考。
<pre>#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }</pre>

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

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

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

如果我们都正确地完成了这些，你的列表看起来像：

<ul style="margin: 0; padding: 0; list-style-type: none; list-style-image: none">
<li style="display: inline; text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">HOME</li>
<li style="display: inline; text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">RECIPES</li>
<li style="display: inline; text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">TRAVEL</li>
<li style="display: inline; text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink; font-style:bold">WORDPRESS</li>
</ul>

==关于横向菜单的更多的信息==
设计列表有许多不同的方式。运用你的想象力，拿出你自己的设计，更改颜色，以及任何你想要更改的东西。以下是一些资源，会帮助你开始，并且学习更多的横向和其它特别效果的菜单：
* [[WordPress:Dynamic Menu Highlighting|聚焦动态菜单]]
* [http://css.maxdesign.com.au/listamatic/ Maxdesign's Listamatic]
* [http://css.maxdesign.com.au/listutorial/index.htm Maxdesign's Listutorial]
* [http://www.2dwebdesign.com/tutorials/2-left-nav1.html 2D Web Design - 用CSS创建不同样式的菜单]
* [http://www.wpdfd.com/editorial/wpd0404footnote.htm 网页设计者的只有一个图像的CSS Rollovers]
* [http://moronicbajebus.com/wordpress/wp-content/cssplay/top-menu/横向菜单栏  使用样式表]
* [http://www.juicystudio.com/tutorial/css/menu.asp Juicy Studio CSS Styling 一个作为菜单的列表]
* [http://www.yourhtmlsource.com/stylesheets/csstext.html 你的HTML原始资料: CSS文本格式]
* [http://www.yourhtmlsource.com/stylesheets/csslinks.html 你的HTML原始资料: CSS 链接格式]
* [http://www.howtocreate.co.uk/tutorials/testMenu.html 没有java描述语言的CSS-2纯CSS菜单]
* [http://www.cameraontheroad.com/learn/web/cssfun1.html Camera On the Road's CSS Fun with Lists]
* [http://www.cameraontheroad.com/learn/web/cssexperiment7.html CSS对列表和菜单的试验]
* [http://www.dragon-labs.com/articles/utm/ 最终的 Tabbed 菜单]