• 18963401086
个性化导航效果制作,带背景图片的导航条制作方法。
作者:速得网络 /2020-04-07 阅读量:

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

 

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

 

001.jpg

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

 

1.png

 

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

 

3.png

 

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

 

4.png

 

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

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

 

5.png

 

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

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

 

6.png

相关文章
热门栏目
建站必读
建站资讯
建站教程
热门标签

建站资讯 | 模板大全 | 云主机 | 加盟合作 | 关于我们 |

公司地址:山东济南 咨询QQ:1051143887 电话:18963401086 

速得网络提供企业网站建设模板建站自助建站快速建站等服务,是专业做企业网站的公司。

备案号:鲁ICP备19050339号 

Copyright @ 2009-2020 速得网络 www.sudecn.com All Rights Reserved. 版权所有