导航类组件-云谷网站建设

导航通常用在网站顶部和底部,用于把网站的每个页面链接起来。从网站布局来说,通常把网站设计为顶部区、中间内容区和底部区域。顶部和底部(页头页尾)一般是网站的固定内容,比如放置导航和轮播图等,我们可以把页头和页尾单独进行设计,这样在设计页面的时候就可以选择一个通用的页头页尾,而导航就是放置在页头页尾里面,当然也可以个性化的去设计,这个没有限制。

 

 

1,选择组件

在设计页面左侧功能栏内找到“设计”-“栏目导航”,任意选择一个导航组件添加到页面上。导航组件分为横向和竖向,属性大致相同,区别只在于外观样式。

 

 

2,设计样式

添加之后点击“导航”两个字,弹出属性编辑器,这时可以对该组件进行详细的设置。如果外观不喜欢,可以选择切换样式,每一个样式都有自己独特的外观。

 

 

3,主导航和子导航。

主导航就是第一级导航,第一眼看到的;

子导航是在主导航之下的第二级导航,通常情况下是隐藏的,需要鼠标指向一级导航时才会出现。

 

 

4,导航栏的状态和属性设置

不管是主导航还是子导航,它们都有三个状态:

常态:没有鼠标点击也没有被鼠标指针悬停;

悬停:鼠标的指针悬停在某一个导航按钮的名字上;

选中:被鼠标点击,打开了新的页面或者产生了某一个动作。

访客在访问网站时,会有很多的行为,会用鼠标点各种各样的按钮。为了反馈这个信息,就需要在不同的动作下有不同的反应。比如鼠标指着某一个按钮,这个按钮就放大或者变色;点击某一个按钮,这个按钮的字体就变色等等。

这样就让用户知道,哦我点了这里的,我选中了这里的。

具体的每一个交互状态和样式,都可以在属性编辑框中去设计。

 

 

5,导航数据

点击属性编辑框中的“数据”,可以添加和删除导航的数据来源,数据可以是选择跳转到网站的页面,文章,产品或者直接给导航一个网址。

 

子导航怎么添加呢?

先添加一个导航,取名为“1”,上级导航选择“主导航”;再添加一个导航,取名为“2”,上级导航选择“1”。

 

 

 

 

最新文章

专题推荐