栏目导航

本文说明速成美站设计器中栏目导航相关能力：先介绍各导航控件用途，便于选用；再说明如何添加与设置；最后说明二级导航与三级导航的做法。

1.1、各栏目导航作用

• 横向导航：横向展示的导航，可单击跳转至页面内某一位置或其他页面。
• 竖向导航：纵向展示的导航，可单击跳转至某一位置或其他页面。
• 面包屑：展示访客当前访问路径，并可选择返回上级页面。
• 语言切换：使用多语言时，页面上需放置语言切换控件，便于浏览者切换语言。说明与更多操作可查阅多语言、语言切换相关专题（以您使用的设计器版本为准）。
• 手机 / PC 切换：需在 PC 端设计器与手机端设计器中各添加一个该控件，浏览者方可在两端预览效果。

2.1、添加栏目导航类控件

单击设计 > 栏目导航，在横向导航、竖向导航、面包屑、语言切换、手机/PC 切换等类型中选择所需控件，在设计区适当位置单击即可完成添加。

2.2、设置栏目导航类控件

单击导航（或对应入口），可弹出用于设置该导航的快速设置面板。

• 样式：设置导航在常态、悬停、选中等情况下的外观。
• 编辑：设置各导航项的导航名称、上级导航、跳转目标、打开方式及导航图标等。

  

• 动效：设置导航动画效果。
• 排列：设置尺寸与位置（具体项因控件而异）。

2.3、横向导航 — 导航容器设置

横向导航中的第一个样式为导航容器，可配置项较多。导航容器包含 样式 / 编辑 / 动效 / 排列 等设置（与常规导航面板类似但更丰富）。

• 样式
  • 常态：无操作时的展示样式。
  • 切换：页面滚动等场景下的样式（如下滑时）。
  • 悬停：鼠标停留时的样式。
  • 选中：单击选中后的样式。
• 编辑
  • 图片设置：可设置常态/下滑时的 Logo 图、鼠标悬停提示文字、单击图片的跳转链接与打开方式等。
  • 导航设置：添加导航栏目，设置上级导航、链接、打开方式、图标等。

  

• 动效：导航动画效果。
• 排列：可设置尺寸等。（因导航容器默认贴在页面顶部，一般不允许再调位置。）

2.5、删除当前控件

选中导航控件后，单击工具栏中类似废纸篓的图标，即可删除该控件。

3.1、应用拓展：如何设置二级导航？

• 方法一：添加导航时，通过选择上级导航，在指定一级下添加二级导航，并可继续编辑当前二级项。

  

• 方法二：添加完成后，通过拖拽，将某个一级导航拖到另一导航下，即可调整为二级结构；支持继续编辑、删除等操作。

  

3.2、应用拓展：如何设置三级导航

通过标签控件与导航控件组合，可实现三级导航结构。

1. 添加指定标签控件：单击 设计 > 排版布局，选择带上下箭头的标签控件，在页面合适位置添加。
2. 标签实质为容器，可视作一级导航；将导航控件放入标签容器内，即形成二级导航。
   说明

   当界面出现「移入标签」等提示时，表示已成功拖入标签容器范围内。

3. 在导航控件的编辑状态下，单击 数据 > 添加导航，配置三级导航：选择上级导航以及关联页面等。