PbootCMS导航菜单-导航菜单的使用教程

2022-09-26

多级菜单实现

通常默认导航是这样写的

1 {pboot:nav num=10 parent=0}
2     nav:name
3 {/pboot:nav}

默认导航示例

PbootCMS导航菜单-导航菜单的使用教程

在添加二级导航时,可以参照官网的方式添加好。

然后在加上一个if判断,即使用这个参数 nav:soncount 当它大于0时才触发循环,避免无二级菜单时出现空白内容

1 {pboot:nav num=10 parent=0}
2     [nav:name]
3     {pboot:if([nav:soncount]>0)}
4     {pboot:2nav parent=[nav:scode]}
5             [2nav:name]
6     {/pboot:2nav}
7     {/pboot:if}
8 {/pboot:nav}

具体写法如下图所示,三级嵌套也基本上类似操作

PbootCMS导航菜单-导航菜单的使用教程

菜单高亮显示

菜单高亮显示需要使用到Pboot官方自带的判断语句,为当前菜单添加 active 选择器,然后给他写个样式即可

1 <li class="nav-item dropdown {pboot:if('[nav:scode]'=='{sort:tcode}')}active{/pboot:if}" >
2 里面放a标签
3 <li>

PbootCMS导航菜单-导航菜单的使用教程

中英文菜单实现

1 <li class="nav-item {pboot:if('{pboot:sitelanguage}'=='cn')} display-none {/pboot:if} {pboot:if(0=='{sort:scode}')}active{/pboot:if}">
2     <a class="nav-link" href="{pboot:sitepath}/" ><i class="fa fa-home"></i> HOME</a>
3  </li>
4  <li class="nav-item {pboot:if('{pboot:sitelanguage}'=='en')} display-none {/pboot:if} {pboot:if(0=='{sort:scode}')}active{/pboot:if}">
5     <a class="nav-link" href="{pboot:sitepath}/" ><i class="fa fa-home"></i> 首页</a>
6  </li>

上面代码需要添加 display-none: none; 样式在样式表里,当页面为对应语言时,不同导航显示

复用导航也是类似方式实现,代码截图如下

暂时更新这部分教程,如果有新用法,再进行添加

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明 1、本站所发布的全部内容源于互联网搬运,(包括源代码、软件、学习资料等)本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的23个小时之内,从您的电脑或手机中彻底删除上述内容。
2、访问本站的用户必须明白,本站对所提供下载的软件和程序代码不拥有任何权利,其版权归该软件和程序代码的合法拥有者所有,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如本站不慎侵犯您的版权请联系我们,我们将及时处理,并撤下相关内容!敬请谅解! 侵删请致信E-mail:messi0808@qq.com
3、如下载的压缩包需要解压密码,若无特殊说明,那么文件的解压密码则为www.xmy7.com
4、如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

小蚂蚁资源网 cms教程 PbootCMS导航菜单-导航菜单的使用教程 https://www.xmy7.com/zh/cms/15005.html

相关文章