publiccms实现首页菜单栏下拉的方法

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。

今天接到了个需求，使用publiccms实现首页导航栏下拉的效果，效果如下：

目前我的思路如下：

采用分类的方法实现
将左侧的项作为二级分类
右边内容作为三级分类
其中，右边红色部分是三级分类的标题，红色下面的项，是作为分类扩展来实现的。

后台分类的层次关系如下：

分类类型如下所示：

接下来就是实现代码了，通过双重循环的方式遍历所有菜单。

<!--解决方案下拉显示的宽屏菜单-->
<div class="navigation-down"><div id="product" class="nav-down-menu menu-1 " style="display: none;" _t_nav="product"><div class="navigation-down-inner" ><div class="row"><!--空的，占地的--><div class="col-lg-1 col-md-1 kongde"></div><!--菜单信息--><div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 text-center caidaninfo" style="margin: 0 auto"><div class="index_section sec02"><div class="container"><div class="row"><!--左边的菜单--><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"style=" background-color: rgba(0,0,0,0.4); padding: 0px; "><div class=""style="border: 0;margin-top: 0px !important;padding-top: 0 !important;"><ul class="index_jjfaxl_ul"><li class="zxlf4" ><b>查看全部解决方案></b></li><@_categoryList parentId=26><#assign counts=0>  <#list page.list as a><li class="text_nav_item_xiala zxlf4  " data-i="${counts!}">${a.name!}</li><#assign counts=counts+1>  </#list></@_categoryList> </ul></div></div><!--点击菜单显示的内容--><div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"><@_categoryList parentId=26><#list page.list as a><div class="xiala_info col-lg-12 col-md-12 col-sm-12 col-xs-12 text_item_xiala "><@_categoryList parentId=a.id ><#list page.list as b><dl><dt><a href="${b.url!}">${b.name!}</a></dt><dd><a href="${b.url!}">${getCategoryAttribute(b.id).one!?no_esc}</a></dd><dd><a href="${b.url!}">${getCategoryAttribute(b.id).two!?no_esc}</a></dd><dd><a href="${b.url!}">${getCategoryAttribute(b.id).three!?no_esc}</a></dd><dd><a href="${b.url!}">${getCategoryAttribute(b.id).four!?no_esc}</a></dd><dd><a href="${b.url!}">${getCategoryAttribute(b.id).five!?no_esc}</a></dd></dl></#list></@_categoryList></div></#list></@_categoryList></div></div></div></div></div></div></div></div></div>

已经OK啦。

publiccms实现首页菜单栏下拉的方法相关推荐

Android开发笔记（一百六十四）仿京东首页的下拉刷新
上一篇文章介绍了高仿京东的沉浸式状态栏,可是跟京东首页的头部轮播图相比,依然有三处缺憾: 1.京东的头部Banner上方,除了有悬浮着的状态栏,状态栏下面还有一行悬浮工具栏,内嵌扫一扫图标.搜索框,以 ...
抖音实战~首页视频~下拉刷新
文章目录 1. 配置下拉刷新 2. 下拉刷新监听 3. tab监听索引 4. 控制台监控 5. 父子组件调用 6. 效果图 1. 配置下拉刷新在pages.json配置文件中添加如下配置: &quo ...
解决iOS下拉回弹方法二
原文地址:https://segmentfault.com/a/1190000007301527 一篇解决 iOS下拉回弹的文章分享给大家.加了些注释.并且应用在vue中.再次感谢原作者. <t ...
重置 select2 下拉框方法
$('.resetSelect2').on('click',function(){$('#caseSelect').val(null).trigger("change");// 或 ...
android支付宝动态更新,Android仿支付宝首页下拉刷新
题外话学习了Behavior之后,发现效果都可以通过Behavior来实现,包括支付宝首页的下拉刷新效果,其重点效果指标在于下滑上部分的布局,同样能够进行下拉刷新,其下拉刷新的布局展开的位置在中间部 ...
仿支付宝首页下拉刷新
声明:转载请注明本文地址 DEMO相关 APK下载地址 https://fir.im/ckh1 Github源码,欢迎大家指正,以及star,谢谢 https://github.com/JmStefa ...
谈谈微信首页下拉拍摄小视频功能
时间回到2014年,此刻你就是一名光荣的微信产品经理,在此前一年Twitter旗下短视频分享应用Vine已经风靡了美国,而国内以美拍为代表的国内学徒也是搅得风声水起.此刻核心功能为移动即时通讯的微信, ...
excel表格中如何设置下拉菜单
一. 直接自定义序列用"数据/有效性"功能可以达到目的. 以选择性别为例,制作有男.女选项的下拉菜单: 选中"性别"数据区域: 执行"数据/有效性& ...
mpvue 小程序如何开启下拉刷新，上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉 ...

publiccms实现首页菜单栏下拉的方法

publiccms实现首页菜单栏下拉的方法相关推荐

最新文章

热门文章