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

从本篇教程开始，将会以网站中常用的一些组件为例，来帮助大家了解和熟悉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>
        </li>    
        {/pboot:nav}    
    </ul>    
</nav>

有的同学会发现，这种导航高亮的方式，在除首页外的其他栏目，给其栏目下的二级分类做高亮时，就不好用了，那么，玄北来改一点：

<nav class="menu">    
    <ul>    
        {pboot:nav}    
        <li class="{pboot:if('[nav:scode]'=='{sort:scode}')}active{/pboot:if}">    
            <a href="[nav:link]">[nav:name]</a>
        </li>    
        {/pboot:nav}    
    </ul>    
</nav>

细心的同学应该可以发现，{sort:tcode}被我改成了{sort:scode}