PbootCMS多级导航菜单样式和使用方法

从本篇教程开始，将会以网站中常用的一些组件为例，来帮助大家了解和熟悉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概念，大家可以自行100度或者去看CSS参考手册）。

1、设置盒模型（方便padding和rgin的计算）
//演示就简单粗暴地使用*来
* { 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 { rgin: 0; padding: 0; color: #333; font: 16px/24px "-apple-system", "Helvetica", "Microsoft YaHei", "PingFang SC"; outline: none; }
4、清除ul和li的默认样式
ul, li { rgin: 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而不用rgin？
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-indexopacity: 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 ); }

到此为止，一个有简单动画效果的下拉二级导航完成。
总结：二级导航虽然看起来代码量不大，但涉及的知识点还是比较多的，需要花点时间好好研究一下。

本文标签：

声明：本文由代码号注册/游客用户【柯河舍】供稿发布，本站不对用户发布的PbootCMS多级导航菜单样式和使用方法信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：柯河舍» /dmh/4489.html

很赞哦！ ()