本篇是制作最简单的聚合菜单，也就是响应式导航菜单的方法，使用纯CSS。直接在响应式下把所有分类和所有页面做成一个精简的菜单。形如：首页+分类+页面。

在原正常导航菜单下使用两个遍历抓取分类和页面，下面的代码取自INLOUJV主题的header.php文件：

<div class="header-nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container'=> false ,'menu_class' => 'nav-menu'));?>
<!--下面是聚合菜单-->
<ul class="mobile-nav nav-menu">
    <!--这是首页-->
    <li><a href="<?php echo home_url(); ?>">首页</a></li>
    <!--这是聚合分类-->
    <li><span  id="mobile_nav">分类</span>
        <ul class="sub-menu" id="mobile_nav_list">
        <?php 
            $category = get_categories('hierarchical=false');
            if( !empty ( $category ) ){
                foreach($category as $cate){
                    echo '<li><a href="'.get_category_link($cate).'">'.$cate->name.'</a></li>';
                }
            }
        ?>
        </ul>
    </li>
    <!--这是聚合页面-->
    <li><span id="mobile_nav">页面</span>
        <ul class="sub-menu" id="mobile_nav_list">
        <?php 
            $mypages = get_pages();
            if( !empty ( $mypages ) ){
                foreach($mypages as $pages){
                    echo '<li><a href="'.get_page_link($pages).'">'.$pages->post_title.'</a></li>';
                }
            }
        ?>
        </ul>
    </li>
</ul>
</div>

剩下的就是CSS了，CSS分两部分，一部分是正常情况下聚合菜单隐藏，另一部分是响应式时聚合菜单显示，都在下面了

/*正常*/
#header .mobile-nav{display:none}
/*手机*/
#header .mobile-nav{display:block}
#header .mobile-nav .sub-menu li,#header .mobile-nav .sub-menu a{height:30px;line-height:30px}