个性化导航效果制作,带背景图片的导航条制作方法。
先看下我们要实现的个性导航效果,如下图。当选中目标项目时,目标项目底部会有一个装饰图片,这是怎么做出来的呢?
1、首先,在顶部导航空白处,添加一张或者多张装饰效果图片,如下图。
2、找到 模块 ,导航,拖动您喜欢的导航效果,到右侧页面顶部空白处。
3、调整好 导航栏 基础样式 的背景颜色、导航宽度、导航高度。
4、重点来了,选中样式里,导航宽度、导航高度要与基础样式保持一致,文字颜色换成您需要的选中颜色。
要点:背景颜色这里换成 透明色。
5、看看最后实现的带图片背景的导航效果。
原理其实很简单,当导航中的某个栏目被选中时,选中项的背景色变成透明色,选中项后面的图片就显示出来了。这样就实现了个性化带背景图片的导航条。