從本篇教程開始，將會以網站中常用的一些組件為例，來幫助大家了解和熟悉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>