AIPage教学课程

新手入门必看,教您快速学会如何使用AIPage搭建站点

网站导航菜单设计

网站导航分为内置导航和自由设计导航两种模式,常用导航设置如下:

1 内置导航版块的使用

内置导航版块是系统中开发好的响应式内置导航头部,每个版块都已经设计好了较为固定的风格,提供了基本的样式设置对颜色和功能进行调整。内置导航版块能快速设计站点导航,点击头部版块切换设计查看目前已有的导航版块效果。例如通用企业风格导航、商城风格导航、下拉产品风格、logo不同位置风格等,切换任何版块可以快速运用相应效果,并且导航菜单设置能保持不变。


注意需要区分当前版块是否是全局头部,全局头部版块带有黄色边框,如果没有看到导航版块或者全局版块,可以在左侧页面设置  -> 页面布局里开启全局头部,否则使用普通页头版块设计的导航不能自动同步到其他页面使用,除非当前页面要自定义导航效果。



内置导航的菜单编辑可以直接选中菜单进入编辑面板,二三级菜单需要横向拖拽控制层级(部分导航才支持三级菜单,层级太深影响用户体验)


版块设置里除了样式设置,需要注意的是导航类型和导航宽度设置,导航类型里部分导航带了固定效果,可以控制导航在滚动的时候始终固定在顶部,另外还有浮动效果可以让导航浮动显示在轮播图或者banner大图上方,官网首页带大图轮播时这种效果比较常见。

导航宽度设置则是内置版块在展示时的内容区宽度控制,可以自动撑满整个屏幕,或者只显示在页面设置的内容区宽度。


2 自由元素设计定制导航

内置版块数量有限,如果风格不能满足需求,需要使用空白版块结合元素设计自定义导航效果。常用的元素包括元素 -> 系统 -> LOGO控件和元素 -> 菜单里面的元素组件。


与内置版块一样,自由设计菜单通用支持浮动和吸顶模式,在导航设置里切换设置体验不同的效果差异,如果要设置浮动建议设计好之后再切换成浮动效果,否则无法直接点击选中版块需要在左侧页面视图里选中头部版块。

自由设计比较灵活,按照想要的设计效果进行自由设计即可,如果有复杂的下拉菜单显示效果,可以搭配选项卡元素来设计,具体参考选项卡设计教程。


3 底部导航菜单

底部导航一般会带有页面重要的链接,方便用户快速找到相应页面,另外还有友情链接等。底部导航可以直接使用文本来设计,给每个文本添加链接即可。如智能云官网底部导航效果