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