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

公告：菜鸟吧APP于2024.9.15正式上线，请首页右上角进入下载，本站资源均来源于互联网及会员投稿发布，所有资源仅供学习参考研究使用，请勿商用或其它非法用途，商用请购买正版，否则产生一切后果由用户自行承担！谢谢！

当前位置：主页 > 站长学堂 > 站长资讯 >

时间：2024-12-11 20:51 作者：菜鸟哥浏览：次收藏挑错打印

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

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

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

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

所以，先开始写导航菜单的HTML部分：

查看源码

<ul>

<li>

<ul>

</ul>

</li>

</ul>

</nav>

接下来，使用PbootCMS的模板标签来填充数据：

查看源码

<ul>

{pboot:nav}

<li>

{pboot:2nav parent=[nav:scode]}

<li>

</li>

{/pboot:2nav}

</ul>

</li>

{/pboot:nav}

</ul>

</nav>

看一下前端页面：

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

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

导航高亮：

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

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

代码：

查看源码

<ul>

{pboot:nav}

{pboot:2nav parent=[nav:scode]}

</li>

{/pboot:2nav}

</ul>

</li>

{/pboot:nav}

</ul>

</nav>

本文标题：pbootcms模板制作教程五 - 多级导航菜单

本文地址：https://www.cniaoba.com/31662.html

上一篇：pbootcms模板制作教程四 - pbootcms模板标签手册

下一篇：没有了

本文标签：菜鸟吧源码教程导航菜单开始本篇将会模板制作教程多级 PbootCms

郑重声明：
本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途。若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
我们不承担任何技术及版权问题，且不对任何资源负法律责任。
如无法下载，联系站长索要。
如有侵犯您的版权，请给我们来信：cainiaovip8@qq.com，我们尽快处理。

pbootcms模板制作教程三 - 创建模板文

世界互联网大会沃通发菜鸟布：网络安全

PbootCMS站点地图sitemap.xml插件

推荐资讯: [站长资讯] pbootcms模板制作教程三 - 创建模板文; [站长资讯] PbootCMS站点地图sitemap.xml插件; [站长资讯] pbootcms去除URL地址中index.php路径; [站长资讯] 3秒就被破解我家的智能锁还能不能用; [站长资讯] pbootcms后台配置留言发送到QQ邮箱教; [站长资讯] 免费开源CMS建站系统怎么选择？; [站长资讯] pbootcms模板制作教程一 - 认识并理解; [站长资讯] pbootcms模板制作教程二 - 必备工具及; [站长资讯] pbootcms表单使用Ajax无刷新提交留言; [站长资讯] 进一步说明： 1、菜鸟吧源码源码语义

热点资讯: [站长资讯] pbootcms模板制作教程三 - 创建模板文; [站长资讯] 世界互联网大会沃通发菜鸟布：网络安; [站长资讯] PbootCMS站点地图sitemap.xml插件; [站长资讯] pbootcms去除URL地址中index.php路径; [站长资讯] 3秒就被破解我家的智能锁还能不能用; [站长资讯] pbootcms后台配置留言发送到QQ邮箱教; [站长资讯] 建一个简单的网站需要多少钱？; [站长资讯] 武汉全网销有限公司快菜鸟照排名霸屏; [站长资讯] 保障公民、法人和其他组织的合法权益; [站长资讯] 免费开源CMS建站系统怎么选择？