大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

今天接到了個需求，使用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实现首页菜单栏下拉的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。