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

 2014-08-23 20:12

今天,针对与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主题时,您可以很便捷的制作出导航条三级导航效果。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: