從本篇教程開始，將會以網(wǎng)站中常用的一些組件為例，來幫助大家了解和熟悉PbootCMS的標簽。
因為習慣從上往下寫頁面代碼，所以就從網(wǎng)頁頭部的導航菜單開始。
本篇教程所需要掌握的知識點：CSS盒子模型、CSS選擇器、浮動、清除浮動、絕對定位、相對定位、CSS3 2D轉換、CSS3 過渡、導航菜單列表標簽、當前欄目標簽、if條件語句、PHP運算符。
每個人都有自己的代碼習慣，比如我就喜歡先寫HTML（結構），再寫模板標簽（數(shù)據(jù)），接著寫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的模板標簽來填充數(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>
|
看一下前端頁面：
可以看到，二級菜單已經調用出來了，接下來處理一下導航高亮。
導航高亮：
原理：判斷當前欄目的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>
|
