制作一个标签式的导航效果

尹广磊 · 发表于 2015-3-10 22:35:07

学习目标：

见下图，制作一个这样的标签式导航效果。

补充知识：

确保你已经进行了以下两项设置，
1. 把网络设置改成间隔5像素，并开启对齐网格
2. 去除了矩形拼在一起双边框的问题

教程开始：

见下图，首先拖入一个矩形，然后更改形状为下边开口的形状，并拖动出一定的圆角，
然后按住Ctrl拖动矩形来复制出两个同样的图形（Mac下按Alt键）。

然后拖入一条横线，先移到矩形开口的下方，见下图。
由于“对齐对象”的作用，你只能拖动到距离开口5像素的地方，否则就会拖过。
仔细看，此时只是横线的虚边与矩形有接触了，矩形的实芯还并没有接触到矩形的开口处。

选中横线，然后按住Shift，再按一下“向上”的方向键，此时横线会向上移动一个间隔的距离，
刚好移动5个像素，让横线与矩形的下开口有正好的接触，见下图。

见下图，选中中间的矩形，然后按工具栏上的“置于顶层”按钮，
可以将该矩形移到横线的上一层，此时矩形的白开口会重新遮挡住下面的横线。
由此，以该矩形的开口状态，来表达出该标签为当前窗口的效果。

最终效果就是如下图这样，工具栏上“置于顶层”后面的按钮是置于底层和上移、下移。

-------------------------------------------------------------------------------------
补充提示：有些高清屏的电脑，由于分辨率的问题，
会造成这个开口的矩形下面也会有一定的线不能完全被开口挡住。
你可以把中间的矩形的高度在工具栏上设置大一个像素，
或是把中间的矩形向下移动一个像素。
-------------------------------------------------------------------------------------

示例文件：

Great · 发表于 2015-3-12 15:29:18

学习啦

854003380 · 发表于 2015-5-21 22:19:08

Got it

mathlogic · 发表于 2015-8-2 13:15:35

学习下开口式的标签导航效果

xiuxiuge · 发表于 2016-3-6 15:13:52

学写了，多谢

李红 · 发表于 2016-6-13 10:38:57

学习了。:victory:

潮潮学习axsure · 发表于 2016-6-20 15:47:06

很有用

CC蟹 · 发表于 2017-7-20 14:38:28

学习了

制作一个标签式的导航效果

评分