个性化导航效果制作，带背景图片的导航条制作方法。

 

先看下我们要实现的个性导航效果，如下图。当选中目标项目时，目标项目底部会有一个装饰图片，这是怎么做出来的呢？

 

1、首先，在顶部导航空白处，添加一张或者多张装饰效果图片，如下图。

 

 

2、找到 模块 ，导航，拖动您喜欢的导航效果，到右侧页面顶部空白处。

 

 

3、调整好 导航栏 基础样式 的背景颜色、导航宽度、导航高度。

 

 

4、重点来了，选中样式里，导航宽度、导航高度要与基础样式保持一致，文字颜色换成您需要的选中颜色。

要点：背景颜色这里换成 透明色。

 

 

5、看看最后实现的带图片背景的导航效果。

原理其实很简单，当导航中的某个栏目被选中时，选中项的背景色变成透明色，选中项后面的图片就显示出来了。这样就实现了个性化带背景图片的导航条。