网站响应式栏目菜单制作方法（点击展开/收缩二级子菜单和三级子子栏目）

在很多企业网站制作中，由于产品分类比较多，在左侧的栏目分类时，就需要使用到二级子菜单和三级子子栏目。为了防止栏目太多造成菜单过长，就需要先将三级子子栏目隐藏，点击二级菜单后，再显示出来。效果如下图：

制作方法

第一步：使用WORDPRESS标签生成调用后台多级栏目；

<div class="nav-box" id="subNavs">

<ul>

<?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=1&hide_empty=0&child_of='.$catid01.''); ?>

</ul>

</div>

第二步：引入JQUERY，下载点击收缩/展开响应式菜单的JS文件。（下载地址：链接: https://pan.baidu.com/s/1RtWAjQ10S5hdEtH2_VmcjA 提取码: u8mk ），使用以下的代码将文件引入到自己的网站中。

<script src="<?php bloginfo('template_directory'); ?>/static/js/script.js"></script>

第三步：在第一步的代码下方放下面的JS代码，来初始化响应式菜单；

<script type="text/javascript">

var $subNav = $("#subNavs");

$subNav.children("ul").find("li").InitNav(22);//初始化响应式菜单

</script>

第四步：放上响应式菜单所需要的CSS样式；

.nav-box{clear:both;text-align:left;margin-bottom:20px;width:100%;overflow:visible;}

.nav-box li{width:100%;padding:0px;text-align:left;position:relative;display:block;}

.nav-box li a{display:block;text-align:center;line-height:50px;color:#fff;font-family:"Microsoft YaHei",Tahoma,Verdana,"Simsun";font-size:16px;background-color: #2b41a4;margin: 20px 20px;}

.nav-box li a:hover,.nav-box li.current > a{background-color: #eb9b2a;}

.nav-box li ul{display:none}

.nav-box li ul li a{padding-left:55px;}

.nav-box li ul li ul li a{padding-left:85px}

.nav-box li .children li .arrow{color: #b0b0b0;position: absolute;right: 30px;top: 12px;width: 26px;height: 26px;line-height: 26px;text-align: center;transition-duration: 0.1s;cursor: pointer;background-color: #fff;border-radius: 26px;}

.nav-box li .children li .arrow:after{font-family:FontAwesome;content:"\f105";display:block;font-weight:bold;font-size:18px}

.nav-box li.active > ul{display:block}

.nav-box li.active > .arrow{transform:rotate(90deg);}

.nav-box>ul>li>ul.children>li>a{background: #7a7676;margin: 10px 20px;}

.nav-box>ul>li>ul.children{display:block;}

.nav-box>ul>li>ul.children .children li a{background: #9f9b9b;margin: 10px 20px;}

通过以上四步的操作，就可以在自己做网站时制作出响应式网站栏目菜单了，可以实现点击展开/收缩二级子菜单和三级子子栏目的效果。