从本篇教程开始，将会以网站中常用的一些组件为例，来帮助大家了解和熟悉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>
看一下前端页面：
可以看到，二级菜单已经调用出来了，接下来处理一下导航高亮。
导航高亮：
原理：判断当前栏目的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>
米趣网免责声明
1、本站所有模板素材资源均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。2、米趣网作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益。
3、非平台线上交易的项目，出现任何后果均与米趣网无关；无论卖家以何理由要求线下交易的，请联系管理举报。
注意事项
1、本站所有素材资源均来自用户分享和发布，部分未经测试可用，并不保证百分百无误及完整。2、素材资源仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
3、米趣网会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全。
4、米趣网无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别。
