從本篇教程開(kāi)始，將會(huì)以網(wǎng)站中常用的一些組件為例，來(lái)幫助大家了解和熟悉PbootCMS的標(biāo)簽。

因?yàn)榱?xí)慣從上往下寫(xiě)頁(yè)面代碼，所以就從網(wǎng)頁(yè)頭部的導(dǎo)航菜單開(kāi)始。

本篇教程所需要掌握的知識(shí)點(diǎn)：CSS盒子模型、CSS選擇器、浮動(dòng)、清除浮動(dòng)、絕對(duì)定位、相對(duì)定位、CSS3 2D轉(zhuǎn)換、CSS3 過(guò)渡、導(dǎo)航菜單列表標(biāo)簽、當(dāng)前欄目標(biāo)簽、if條件語(yǔ)句、PHP運(yùn)算符。

每個(gè)人都有自己的代碼習(xí)慣，比如我就喜歡先寫(xiě)HTML（結(jié)構(gòu)），再寫(xiě)模板標(biāo)簽（數(shù)據(jù)），接著寫(xiě)CSS（樣式），最后寫(xiě)JS（交互）。

所以，先開(kāi)始寫(xiě)導(dǎo)航菜單的HTML部分：

<!-- 演示就只寫(xiě)二級(jí)導(dǎo)航，更多級(jí)導(dǎo)航大家可以依葫蘆畫(huà)瓢 -->    
<nav class="menu">    
    <ul>    
        <li>    
            <a href="#">主欄目</a>    
            <ul>    
                <li><a href="">子欄目</a></li>    
                <li><a href="">子欄目</a></li>    
            </ul>    
        </li>    
    </ul>    
</nav>

接下來(lái)，使用PbootCMS的模板標(biāo)簽來(lái)填充數(shù)據(jù)：

<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>

看一下前端頁(yè)面：

可以看到，二級(jí)菜單已經(jīng)調(diào)用出來(lái)了，接下來(lái)處理一下導(dǎo)航高亮。

導(dǎo)航高亮：

原理：判斷當(dāng)前欄目的ID和導(dǎo)航的ID是否一致，如果一致，則添加class，然后CSS中給這個(gè)class設(shè)置高亮樣式。

方案：使用if條件語(yǔ)句結(jié)合當(dāng)前欄目標(biāo)簽以及導(dǎo)航菜單列表標(biāo)簽進(jìn)行判斷。

代碼：

<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>