pbootcms模板制作教程五:多级导航菜单

2022-12-25 0 3,611

从本篇教程开始,将会以网站中常用的一些组件为例,来帮助大家了解和熟悉PbootCMS的标签。

因为习惯从上往下写页面代码,所以就从网页头部的导航菜单开始。

 

本篇教程所需要掌握的知识点:CSS盒子模型、CSS选择器、浮动、清除浮动、绝对定位、相对定位、CSS3 2D转换、CSS3 过渡、导航菜单列表标签、当前栏目标签、if条件语句、PHP运算符。

 

每个人都有自己的代码习惯,比如我就喜欢先写HTML(结构),再写模板标签(数据),接着写CSS(样式),最后写JS(交互)。

所以,先开始写导航菜单的HTML部分:

<!– 演示就只写二级导航,更多级导航大家可以依葫芦画瓢 –>
<nav class=”menu”>
<ul>
<li>
<a href=”#”>主栏目</a>
<ul>
<li><a href=””>子栏目</a></li>
<li><a href=””>子栏目</a></li>
</ul>
</li>
</ul>
</nav>

接下来,使用PbootCMS的模板标签来填充数据:

<nav class=”menu”>
<ul>
{pboot:nav}
<li>
<a href=”[nav:link]”>[nav:name]</a>
<ul class=”sub-menu”>
{pboot:2nav parent=[nav:scode]}
<li>
<a href=”[2nav:link]”>[2nav:name]</a>
</li>
{/pboot:2nav}
</ul>
</li>
{/pboot:nav}
</ul>
</nav>

看一下前端页面:

pbootcms模板制作教程五:多级导航菜单

可以看到,二级菜单已经调用出来了,接下来处理一下导航高亮。

 

导航高亮:

原理:判断当前栏目的ID和导航的ID是否一致,如果一致,则添加class,然后CSS中给这个class设置高亮样式。

方案:使用if条件语句结合当前栏目标签以及导航菜单列表标签进行判断。

代码:

<nav class=”menu”>
<ul>
{pboot:nav}
<li class=”{pboot:if(‘[nav:scode]’=='{sort:tcode}’)}active{/pboot:if}”>
<a href=”[nav:link]”>[nav:name]</a>
<ul class=”sub-menu”>
{pboot:2nav parent=[nav:scode]}
<li class=”{pboot:if(‘[2nav:scode]’=='{sort:scode}’)}active{/pboot:if}”>
<a href=”[2nav:link]”>[2nav:name]</a>
</li>
{/pboot:2nav}
</ul>
</li>
{/pboot:nav}
</ul>
</nav>

收藏 (0) 打赏

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

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

声明:1、本站资源均来源于用户上传和网络传播,因此不包含技术服务,请大家谅解!2、本站所有资源仅可用于学习交流,若有商业用途之需,请购买正版,否则产生的一切后果将由下载用户本人自行承担。3、本站资源均来源于用户上传和网络传播,如侵犯您的权益,请务必联系客服(E-mail: 469663672@qq.com)删除。4、本站不保证所提供资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!5、本站资源均来源于用户上传和网络传播,仅供学习交流、参考和研究,请理解这个概念,所以不能保证每个细节都符合您的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款,请知悉后再支付下载!

新科源码 PbootCMS教程 pbootcms模板制作教程五:多级导航菜单 https://www.xinke123.net/1744.html

常见问题
  • 因为源码、模板和插件等资源具有可复制性、可传播性,仅用于学习研究,不可商用,订单一旦生效,不支持退换,所以请您务必看清楚后再购买。
查看详情
  • 我们承诺资源均和演示效果图一样,如有不同,全额退款,并且我们的源码和模板都没有留后门,请放心使用。
查看详情

相关资源

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务