模板制作教程(五) - 多級導航菜單
從本篇教程開始，將會以網站中常用的一些組件為例，來幫助大家了解和熟悉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> </ul> </li> </ul> </nav>
是不是很簡單？就是ul和li的無序列表嵌套而已。如果不想寫CSS的時候進行復雜的子元素選擇，還可以給二級菜單的ul加個class，比如實例代碼：
接下來，使用PbootCMS的模板標簽來填充數據：
{pboot:pre}
<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>{/pboot:pre}
看一下前端頁面：
可以看到，二級菜單已經調用出來了，接下來處理一下導航高亮。
導航高亮：
原理：判斷當前欄目的ID和導航的ID是否一致，如果一致，則添加class，然后CSS中給這個class設置高亮樣式。
方案：使用if條件語句結合當前欄目標簽以及導航菜單列表標簽進行判斷。
代碼：
{pboot:pre}
<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>{/pboot:pre}
說明：[nav:scode]是導航列表標簽中調用的欄目id，{sort:tcode}是當前欄目的頂級欄目編碼。那么，這里為什么不用{sort:scode}這個當前欄目編碼呢？雖然在一級導航中，當前欄目{sort:scode}和頂級欄目{sort:tcode}的值是一樣的，能起到一樣的效果。但是導航是需要整站通用的，在子欄目頁面，{sort:scode}的值就是子欄目的id了，主導航的一級欄目就得不到高亮樣式了。同理，這里也不用{sort:pcode}父級欄目編碼。在最下級的導航中則只需要判斷[nav:scode]等于{sort:scode}就可以了。留一個思考題吧：如果是三級或者更多級導航的時候應該怎么樣判斷？提示：利用PHP運算符來組合多個if條件。
到此為之，多級導航所需要的東西都存在了，接下來就交給CSS來把這個多級導航美化一下了。
一、磨刀不誤砍柴工，先做一些準備（關于涉及到的一些CSS概念，大家可以自行百度或者去看CSS參考手冊）。
1、設置盒模型（方便padding和margin的計算）
//演示就簡單粗暴地使用*來
* { box-sizing: border-box; }2、浮動與清除浮動
//左浮動
.float-left { float: left; }
//右浮動
.float-right { float: right; }
//清除浮動
.clearfix::before { content: ""; display: table-cell; }
.clearfix::after { content: ""; display: table; clear: both; }3、設置字體
body { margin: 0; padding: 0; color: #333; font: 16px/24px "-apple-system", "Helvetica", "Microsoft YaHei", "PingFang SC"; outline: none; }4、清除ul和li的默認樣式
ul, li { margin: 0; padding: 0; list-style: none; }5、設置a標簽的默認樣式
a, a:after, a:before { text-decoration: none; color: #333; cursor: pointer; outline: none;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; }
a:hover { color: #8667F7; }以上樣式，算是初始化整體頁面樣式，不僅能用在導航，也影響整站。
看一下初始化樣式后的頁面：
可以看到，扎眼的鏈接藍色和下劃線，以及不同瀏覽器下body不同寬度的邊距，ul和li默認的樣式都不見了，鼠標移到鏈接上，還有一個顏色漸變效果。
二、先整體后局部，先給導航整體添加樣式美化
1、設置導航高度和寬度，以及背景顏色和文字顏色
/*
- 設置導航高度寬度和背景色
- 沒有邊距，文字貼著邊不好看，給個內邊距padding: 16px;
*/
.menu { padding: 0 16px; width: 100%; height: 48px; background: #000; }
/* 一級菜單設置為相對定位 */
.menu > ul > li { position: relative; }
/*
- 因為導航背景顏色是黑色，所以設置一級導航的文字顏色是白色
- 導航高48px，一級導航的文字要垂直居中，可以計算（48-文字行高）/2，然后設置外邊距或者內邊距，讓文字剛好居中。
- 上面的居中方式太復雜了，不如line-height: 48px;讓文字行高和導航高度一樣，自然就居中了。
*/
.menu > ul > li > a { line-height: 48px; color: #FFF; }2、現在導航是垂直排列的，讓他們浮動起來
還記得前面定義的float-left和float-right以及clearfix嗎？直接把他們放在class里面吧。
看一下現在前端是什么樣子了：
看起來是有點像那么回事了。
三、美化一級導航
1、調整一級導航的間距
.menu > ul > li > a { display: block; padding: 0 32px; line-height: 48px; color: #FFF; }思考：為什么要display: block？同樣是邊距，為什么使用padding而不用margin？
2、給一級導航高亮
.menu > ul > li:hover > a,
.menu > ul > li.active > a { background: #8667F7; }思考：為什么hover放在li處而不是a處？
看一下現在的前端樣式：
四、美化二級導航
1、二級導航背景色，陰影
/*
- 二級菜單會占用高度，因此需要給它設置絕對定位，因為一級菜單是相對定位，因此二級菜單的位置是根據一級菜單來的
- 二級菜單的寬度100%也是根據一級菜單來的
*/
.sub-menu { position: absolute; width: 100%; top: 48px; left: 0; background: #8667F7; box-shadow: 0 0 8px rgba(0,0,0,0.1); }2、調整二級導航文字
.sub-menu > li > a { display: block; padding: 8px; text-align: center; font-size: 14px; color: #FFF; }3、二級導航之間添加分割線
.sub-menu > li + li > a { border-top: 1px solid #7256D8; }4、二級導航鼠標hover效果
.sub-menu > li:hover > a { background: #000; }再來看一下現在的效果：
看起來不錯，就差一步了。
五、CSS實現下拉效果
要實現二級導航的下拉效果有很多方法，這里只介紹使用CSS3的2D轉換來實現。
CSS3中的transform能夠實現元素的2D或3D轉換。
實際上，translateY是定義Y軸轉換，是最適合的一個。不過考慮到二級菜單的高度不一，還需要使用js來判斷，有點麻煩。因此使用scaleY（Y軸縮放）來實現二級菜單的下拉效果。
1、先給二級菜單加一個過渡
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;
2、設置2D轉換的基點位置
-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
3、默認狀態Y軸縮放為0
-webkit-transform:scaleY( 0 ); -moz-transform:scaleY( 0 ); -ms-transform:scaleY( 0 ); -o-transform:scaleY( 0 ); transform:scaleY( 0 );
4、默認狀態隱藏，并且因為二級導航要覆蓋在其他層上面，設置z-index
opacity: 0; //默認透明 z-index: 999; //在其他層上面 visibility: hidden; //不可見
綜合樣式：
.sub-menu { position: absolute; width: 100%; top: 48px; left: 0; background: #8667F7; box-shadow: 0 0 8px rgba(0,0,0,0.1); opacity: 0; z-index: 999; visibility: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform:scaleY( 0 );
-moz-transform:scaleY( 0 );
-ms-transform:scaleY( 0 );
-o-transform:scaleY( 0 );
transform:scaleY( 0 ); }5、鼠標hover的時候取消透明和不可見，Y軸縮放為1
/* 注意：一級導航hover時觸發 */
.menu > ul > li:hover .sub-menu { opacity: 1; visibility: visible;
-webkit-transform:scaleY( 1 );
-moz-transform:scaleY( 1 );
-ms-transform:scaleY( 1 );
-o-transform:scaleY( 1 );
transform:scaleY( 1 ); }到此為止，一個有簡單動畫效果的下拉二級導航完成。
總結：二級導航雖然看起來代碼量不大，但涉及的知識點還是比較多的，需要花點時間好好研究一下。