常青藤

前言－Preface：

平直目录是一种非常好的方式，以创建类别或页面目录，高亮显示网站的特别内容版块。许多网页设计者在header下方放置目录，以吸引读者眼球。

平直目录通过html列表属性创建。因为是通过水平替代竖直的列表，所有它仍然是一个列表。CSS表现方式允许设置列表以水平方式显示。

现在来创建平直目录。

创建平直目录－Creating Horizontal Menus

下面是一个简单的水平目录。最好简短一点，防治超宽越界造成版面问题。指定目录标签为 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>

代码说明：

1. <?php echo get_settings(’home’); ?>  创建首页链接
2. 其他<li>中链接可自行指定。

列表显示如下：

• HOME
• RECIPES
• TRAVEL
• WORDPRESS

同样可以使用wp_list_cats() template tag将类别显示，如果需要将类别1，3，4和5列出来，而其他舍去，可通过以下代码实现

//代码：
<div id="navmenu">
<ul>
 <li><a href="&lt;?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>

1. 在wordpress风格目录中，在header DIV下方粘贴代码并保存。

应用CSS－Applying the CSS

1. 目录默认地以竖直方式显示，且前面有一个点。在样式表中，我们需要添加 navmenu的参照。第一步需要将前面那个点移除，同时设置整个列表页边距和填充。

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

2. 上面代码可是点和缩进消失。

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

上面代码可实现列表水平显示。

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

上面代码可实现列表成员之间的间距，移除链接的下划线和鼠标放置链接上方变色。

//code

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

改进代码，具体效果图如下：

原创文章如转载，请注明：转载自 长青藤博客 【http://www.liveh.net/blog】

This entry was posted on Tuesday, June 17th, 2008 at 6:37 pm and is filed under Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.