PIZn

      导航菜单的设计，在网站里边起着重要的作用。动态菜单的高亮，既能表明当前的页面的主要内容或关键词，又能告知访问者当前的位置，提高用户体验效果。

      在我为自己的 WordPress 博客设计 Violet 主题的时候，曾经写过一篇文章《“.Violet主题导航和面包屑设计、》做过简单总结。这几天的某个时刻，突然间就想用 Javascript 来实现这一效果，于是在今晚小试了下，最终还是觉得 CSS/PHP 版本的比较方便实用。

      基于纯单页和纯分类的菜单高亮

      在我们设计 WordPress （下文简称 WP ）主题的时候，菜单部分常调用 WP 里面的两个函数 wp_list_pages 和 wp_list_categories 。当我们调用 wp_list_pages 函数作为菜单功能的时候，我们要如何来使其动态高亮呢？具体可以如下设置：

      构造的 PHP 代码入下：

1. <ul id="violet_menu">
2. <?php wp_list_pages(); ?>
3. </ul>

      关于 wp_list_pages() 函数的使用，大家可以移步 wp list pages 查看。

      此时，我们可以在生成的页面中查看源代码：

1. <ul id="violet_menu">
2. <li class="pagenav">Page
3. <ul>
4. <li class="page_item page-item-1 current_page_item"><a href="" title="About">About</a></li>
5. <li class="page_item page-item-2><a hfef="" title="Content">Content</a></li>
6. <li class="page_item page-item-3><a href="" title="Works">Works</a></li>
7. </ul>
8. </li>
9. </ul>

      从标明红色的 class 类来看，WP 已经为我们的菜单高亮提供了方便的途径，我们可以通过 css 设置 page_item 样式和 current_page_item 样式。显然，current_page_item 就是高亮的当前项。至于分类的菜单高亮，也是同个道理。

      其他菜单组合时菜单高亮

      当页面、分类或者其他单独路径页面混合形成菜单的时候，我们应该怎么使菜单高亮呢？在这里简单地介绍下，具体的方法请移步 Dynamic Menu Highlighting。

      同样的道理，构造的 PHP 代码如下：

1. <ul id="violet_menu">
2.     <li<?php
3.        if(is_home())
4.        {
5.        echo " id=\"active"\"";
6.        }?>>
7.        <a href="<?php bloginfo('url')?>">Home</a>
8.     </li>//到这里为止，是菜单栏的主页部分
9.     <li<?php
10.        if(is_page('About')||is_single()&&!in_category('10'))
11.        {
12.        echo " id=\"active"\"";
13.        }?>>
14.        <a href="<?php bloginfo('url')?>/about">About</a>
15.     </li>
16.     <li<?php
17.       if(is_page('contact'))
18.       {
19.       echo " id=\"active"\"";
20.       }?>>
21.       <a href="<?php bloginfo('url')?>/contact">Contact</a>
22.       </li>
23. </ul>

      我们可以通过设置 css 中的 active 来显示高亮菜单。

      最后，关于导航菜单的样式，大家可以参考伟大的列表样式集合。哈哈。