Z-blogPHP模板：PaipkMe主题导航条配置详解

Z-blogPHP模板：PaipkMe主题导航条配置详解

 2014-08-23 20:12    网页设计   标签：Z-BlogPHP 主题 模板 博客 个人网站   2556    发表评论

今天，针对与z-blogPHP模板：PaipkMe主题的做一些相关的配置说明吧，为的是方面大家的使用，首先开说的就是导航条的配置。虽然说导航条大家可以通过默认的形式来自定义，但如想想和我这个导航条一样，可以有下拉菜单或者多个选择的话，是可以通过相代码简单就能实现的。

标准的导航条是：

<li><a href="#" class="sf-with-ul">Home</a></li>

这个熟悉HTML代码的人都应该明白，只要在配置中添加相应的class模块就可以了。这个代码和默认的代码一样，能实现一般导航条的功能，就像我网站Home的按钮。

如果想实现二级栏目？那么代码就变成这样：

<li><a href="#">Blog<span class="sf-sub-indicator"><i class="icon-angle-down "></i></span></a>
<ul>
<li><a href="#" class="sf-with-ul">下拉栏1</a></li>
<li><a href="#" class="sf-with-ul">下拉栏2</a></li>
</ul>
</li>

这个我简单说明下吧，首先是“li”别表代码，这样就在导航条上增加了一个相应的模块，“i class=“XX””代码是给“blog”文字后面增加一个下拉标志的，接着的“ul-li”代码，是在“blog”导航下增加了两个下拉超链接。当鼠标移动blog文字时，这两个栏目名才会显示出来。

导航条的三级栏目实现起来也可简单，就像这样：

<li><a href="#" class="sf-with-ul">Theme<span class="sf-sub-indicator"><i class="icon-angle-down "></i></span></a>
<ul>
<li><a href="#" class="sf-with-ul">模板1</a></li>
<li><a href="#" class="sf-with-ul">模板2</a></li>
<li><a href="#" class="sf-with-ul">模板3</a></li>
<li><a href="#" class="sf-with-ul">模板4<span class="sf-sub-indicator pull-right"><i class="icon-angle-right "></i></span></a>
	<ul>
	<li><a href="#" class="sf-with-ul">模版4说明1</a></li>
	<li><a href="#" class="sf-with-ul">模版4说明2</a></li>
	<li><a href="#" class="sf-with-ul">模版4说明3</a></li>
	</ul>
</li>
</ul>
</li>

这段代码看起来复杂，其实一层次解剖下来也不复杂，首先是到主导航栏上增加了一个小标题“li”，并且增加了一个二级栏目组，在某一个栏目组下来又增加了一个三级栏目组。注意的是，这里的“i class=“XX””是做了一些小标识在上面，起到装饰作用，真正有意义的，应该是每层结构里面的class数据。

所以呢，根据您blog的需求，在使用z-blogPHP的Paipkme主题时，您可以很便捷的制作出导航条三级导航效果。