零基础学做网站培训介绍

当前位置:

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

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

展开/收缩二级子菜单和三级子子栏目

制作方法

第一步:使用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;}

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Dreamweaver跳转菜单制作 视频教程 (1120241 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 自己用代码写的一个网站,莫见笑,这是学习了张老师的代码课程后,自己先画了一个图,然后再用PS切片,再使用DIV和CSS写的一个网站,第一次写,写的不